Jump to content
Search Community

ScrollTriggers within a pinned element have a wrong start trigger position

cb201s test
Moderator Tag

Recommended Posts

I am trying to make this code work. The idea is to have the screens scroll at a little slower speed, than document scroll, but having the labels animat ein from right whenever we "start" a new screen (different colors) in the mock phone on the left.

Unfortunately they don't seem to be completely in sync and get triggered way later for some reason.
I don't really get why they are delayed and how to get them in sync.

Is it due to the "to(...)" of the parent ScrollTrigger.
How can I get them in sync and consider it?

I already tried pinnedContainer, but then the first one triggers correctly and the last ones, after all of the container is scrolled through.


Really appreciate any suggestions :)

(also read the "Most commen errors" section, but is this a ScrollTrigger in a ScrollTrigger problem? If so: how can I do it differently?)

See the Pen qBopXbr by SimonEritsch (@SimonEritsch) on CodePen

Link to comment
Share on other sites

I'm not entirely sure I understand your goal, but I'd likely approach it like this: 

See the Pen bGvaKEd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I assume you didn't actually want to scrub those number animations in (if the user stops the scroll at a certain spot, you might end up with a partially-transparent number/blurb sitting there), so I resolved that for you. 

 

I hope that helps. 

  • Like 1
Link to comment
Share on other sites

Thank you very much @GreenSock .
So basically, what you did was to change the start and end of the Label animations to be bound on the calculated width of the parent scroll trigger with the relative distance in that parent ScrollTrigger position.

And you have added `invalidateOnRefresh`  to make sure it keeps refreshing the scrollTrigger start/end values accordingly.

Thank you very much for your quick help. That works perfectly! :)

Link to comment
Share on other sites

9 minutes ago, cb201s said:

So basically, what you did was to change the start and end of the Label animations to be bound on the calculated width of the parent scroll trigger with the relative distance in that parent ScrollTrigger position.

My goal wasn't focused on the width - it was about just looking at that ScrollTrigger that's driving the main animation of the stuff in the phone screen, and based on the start/end ScrollTrigger positions I just wanted to place the label animations at the right spot accordingly. 

 

11 minutes ago, cb201s said:

And you have added `invalidateOnRefresh`  to make sure it keeps refreshing the scrollTrigger start/end values accordingly.

That was to ensure that if/when the screen gets resized, your "top" value gets refreshed according to the new heights. Otherwise, you'd be calculating it up front and then if the user resized the screen a lot, the distance that "top" moved would have stayed the same. So this is just making it dynamic/responsive. 

 

Glad it helped!

  • Like 1
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.
×
×
  • Create New...