Trying to get text to "follow" scrolling

[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 setting scrub: 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?

[ZachSaucier]

Hey Chris and welcome to the GreenSock forums! And thanks for supporting GreenSock by being a Club GreenSock member.

 

I created an way to do this sort of thing in this very unrefined demo:

See the Pen 9a64fe2c157fb3b810fe419a40182e27 by GreenSock (@GreenSock) on CodePen

 

You should be able to use a similar approach and get it looking similar. I'd love to see your final result, especially if it's in a CodePen!

[ChrisCrossCrash]

That's great, @ZachSaucier!!

 

I've just made it a bit more "fluid" looking by changing the ease on the const scrub animation from power1.inOut to power3.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

[ZachSaucier]

30 minutes ago, ChrisCrossCrash said:

This had me stumped for most of the day yesterday.

Ya, it took me some time to think through how to approach it  Good tweaks!