Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ChrisCrossCrash

Trying to get text to "follow" scrolling

Recommended Posts

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?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×