Frances Coronel

Essentially, I'm trying to get the red box to show up underneath the title text in the initial state. Upon scrolling down, the red box should travel with the user and then stay fixed in the centered position. Initial State: Final state: Noted, will fork moving forward. Thank you!

@ZachSaucier Thanks for the suggestion! I went ahead and made it so every section is pinned but now I'm not sure how to keep the red box element on top of the page initially and moving down on scroll. Any tips? https://codepen.io/fvcproductions/pen/XWjKamd

FYI, looks like the way I configured the tweening with yPercent is a bit off depending on the device (larger window width it seems to work fine) so any advice there would also be appreciated.

I've configured an element (the red box in the CodePen demo) to move from the top of the page to end up being centered in a container. Right now, when I scroll down, the red box doesn't ease down slowly but instead it goes down really fast (see GIF below). Upon scrolling down, the red box also immediately goes towards the bottom of the page before fixing itself in the desired position. Any tips on how to make the red box ease down more slowly and stay centered as the user is scrolling down? Thank you! ?

Yes, I was looking to eliminate the fade in transition more and changing the duration was the right way forward. Thank you very much!

Hi there, I posted the same pen earlier but now I have a different question. I am wondering if there's a way to avoid the in-between transition you see in this CodePen (see screenshot) where the previous element is shown at a lower opacity before transitioning to next one. I know there's something I probably need to update with autoAlpha attribute but I'm wondering what that would be. I know autoAlpha will animate opacity from 1 to 0 then set the visibility property to hidden. I tried removing it but then all the elements showed up so I think I went about it the wrong way. In other words, if I just wanted an immediate transition without any fade to avoid the in-between transition for opacity, how could I go about configuring that?

This worked marvelously. Thanks, Paul!

Hi there, I forked a CodePen based off this topic: The logic in the CodePen worked great for my needs but I found that the logic depends on having the elements with absolute positioning which prevents the links from working. The only link that works is for very last element in the pinned area. gsap.set(elem, { position: "absolute", top: 0 }); Is there alternative logic I can use so that the animation stays the same but that the links are clickable? Thank you!