-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by ChrisCrossCrash
-
-
Hello 😄 First time poster here.
I'm trying to mimic the scrolling behavior of this site, where the text's vertical position lags behind the scroll position.
The effect is most obvious in the navigation menu (click the hamburger icon in the top left). You'll notice that if you scroll down quickly to the bottom of the page, it takes about two seconds for the text to catch up to the scroll position.
This looks like something I could use ScrollTrigger for. In the the docs page video at about 9:50, you can see that the orange box lags the
.ghost
box by one second when it has the settingscrub: 1
. This is the behavior I want, except it should animate the text's vertical position on the screen.The problem is that, unlike with the horizontal position, the vertical position of the element in the DOM doesn't change -- only the scroll position changes.
Any ideas how I can achieve this effect?
Trying to get text to "follow" scrolling
in GSAP
Posted
That's great, @ZachSaucier!!
I've just made it a bit more "fluid" looking by changing the ease on the
const scrub
animation frompower1.inOut
topower3.out
.In addition, I've added a "Stationary Text" element as a stationary reference.
This had me stumped for most of the day yesterday. I'm sure I'll be using this on many of my projects from here on out! Thanks!
See the Pen mdVjLVv?editors=1010 by ChrisCrossCrash (@ChrisCrossCrash) on CodePen