Jump to content
GreenSock

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

Is this possible with ScrollTrigger

Recommended Posts

Hi all,

 

Just trying to figure out how to best achieve something. In my screenshot you can see a section on the page I am animating.

 

As you can see there is an image on the left and a list of titles on the right.

 

Once the user gets to this section I want the mouse scrolling to basically starting from the first element in the list highlight each word one by one and also the image on the left needs to change when each word becomes highlighted.

 

But I feel like this whole section needs to be pinned for this, and I am wondering if this is possible, because I don't think I can pin this section because everything below it will still be scrolling upwards, so do I need to pin the entire body?

 

Thanks for any suggestions and help.

Screenshot 2021-04-27 at 13.42.55.png

Link to comment
Share on other sites

 

Hey @JoeH

 

I once made a demo that essentially does exactly what you are describing above.

Maybe this can get you started.

 

See the Pen 7c9f1aaa4340ace9c4a05102ba89a962 by akapowl (@akapowl) on CodePen

 

 

If for whatever reason you can not pin the section, I would recommend wrapping all your content in a div, and pinning that wrapper, so for ScrollTriggers that are supposed to trigger tweens on elements inside that section you could still use the body as the trigger to calculate their start/end.

 

Hope this helps.

Cheers

 

  • Like 1
Link to comment
Share on other sites

Hey @akapowl

 

You are a life saver, thank you so much!

  • Like 1
Link to comment
Share on other sites

So I got this working, works great. However it doesn't seem to be compatible with this smoothscrolling -> 

 

 

So we have removed this for now. If anyone knows a fix for this please let me know.

 

Link to comment
Share on other sites

 

10 minutes ago, JoeH said:

However it doesn't seem to be compatible with this smoothscrolling

 

That is because of how the smooth-scrolling works. You'd need to hook it up to ScrollTrigger via .scrollerProxy().

But since you are using ScrollTrigger already, you could also leverage that to get the smooth-scrolling effect.

 

See the last example (native ScrollTrigger) on the .scrollerProxy() documentation page.

 

  • Like 1
Link to comment
Share on other sites

Again, thanks. That smooth scroll effect actually seems smoother, awesome!

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.
×