cb201s Posted July 31, 2022 Share Posted July 31, 2022 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 More sharing options...
GreenSock Posted August 1, 2022 Share Posted August 1, 2022 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. 1 Link to comment Share on other sites More sharing options...
cb201s Posted August 1, 2022 Author Share Posted August 1, 2022 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 More sharing options...
GreenSock Posted August 1, 2022 Share Posted August 1, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now