F.D.C.H Posted June 30, 2022 Share Posted June 30, 2022 Hello everybody, just a little understanding question, why it behaves like that. I need the start and end values of multiple ScrollTrigger, which works, if no animation is attached to it. But if an animation is attached, the calculation seams to have a delay. I can force it to calculate immediately by refresh, or wait with timeout, but it seams a bit odd to me, since i have multiple ScrollTriggers. if there is another way, i always appreciate your help Thank you very much. See the Pen WNzbOEG by FDCH (@FDCH) on CodePen Link to comment Share on other sites More sharing options...
SteveS Posted June 30, 2022 Share Posted June 30, 2022 Definitely odd. I played around a bit and console logging the scrolltrigger in console will give different values for start and end compared to logging the values directly. @GreenSock might have some insight. Link to comment Share on other sites More sharing options...
GreenSock Posted June 30, 2022 Share Posted June 30, 2022 Yep, that's all entirely intentional - when it's a timeline that's attached to the ScrollTrigger, there's no way to know when you're done adding things to that timeline, so it waits until the very next tick to refresh() it (calculate the start/end). For example... let tl = gsap.timeline({ scrollTrigger: {...}}) // the line above just created an empty timeline and attached it to a ScrollTrigger...but it's not populated yet! tl.to(...) .to(...) ... // when we're done adding things, how is ScrollTrigger supposed to know? We didn't want to force people to call tl.scrollTrigger.refresh() or something manually when they're done populating it (no doubt lots of people would forget), so we just wait one tick. If it's a tween that's attached, however, there's no need to wait because you can't add more stuff to a tween. Does that clear things up? 1 Link to comment Share on other sites More sharing options...
SteveS Posted June 30, 2022 Share Posted June 30, 2022 So if you need to get the start and end values ASAP, is there a way to target the next "tick"? Or should you manually refresh then call the values? Link to comment Share on other sites More sharing options...
GreenSock Posted June 30, 2022 Share Posted June 30, 2022 No, you don't even need to wait for a tick - when you're done adding stuff to the timeline, you can call refresh() directly on just that ScrollTrigger if you'd like: let tl = gsap.timeline({ scrollTrigger: {...}}); tl.to(...) .to(...); tl.scrollTrigger.refresh(); // <- boom 1 Link to comment Share on other sites More sharing options...
F.D.C.H Posted July 1, 2022 Author Share Posted July 1, 2022 perfect, thank you very much for clearing things up. 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