Need clarification about Scroll Trigger

[paulopanganiban]

I want to know what are the use cases of using ScrollTrigger.create() vs gsap.to(element, scrollTrigger: {} ), I cant seem to find the answer anywhere. Thanks!

[akapowl]

Hello @paulopanganiban

 

When you have one single GSAP tween that you want to be triggered/controlled on scroll, you can easily define the scrollTrigger on that tween; Same for a timeline, except you won't want to define scrollTriggers on every single tween of the timeline, but the timeline-object instead. 

 

You could also have either of them ( i.e. tween or timeline) attached to a ScrollTrigger.create() instead, via the animation property.

 

But you don't have to attach a GSAP tween/timeline to that. Sometimes you'll just want to pin something or toggle a class (via toggleClass), with no tween/timeline attached. That's why it's neat to have the 'standalone' ScrollTrigger.create() method.

 

Does that clear things up a bit?

 

[GreenSock]

Perhaps it would help to think of it this way...

 

Standalone:

// no associated animation...just trigger something at a certain spot
ScrollTrigger.create({
  trigger: "#id",
  start: "top center",
  onEnter: () => doSomething()
});

But we can optionally associate an animation too:

let tween = gsap.to(...);
                    
// associate the animation with the ScrollTrigger so that it scrubs the playhead
ScrollTrigger.create({
  animation: tween, // <-- bingo
  scrub: true,
  trigger: "#id",
  start: "top center",
  onEnter: () => doSomething()
});

But this is just a SHORTER way of doing the exact same thing:

// combined (shorter)
gsap.to(..., {
  scrollTrigger: {
    scrub: true,
    trigger: "#id",
    start: "top center",
    onEnter: () => doSomething()
  }
});

Does that explanation make sense?

[paulopanganiban]

Such excellent answers, it’s all clear to me now. Thank you! 💯🥳🙂