Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
F.D.C.H

Understanding ScrollTrigger Property with Timelines

Recommended Posts

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

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

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? 

  • Like 1
Link to comment
Share on other sites

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

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

 

  • Thanks 1
Link to comment
Share on other sites

perfect, thank you very much for clearing things up.
 

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