ScrollTrigger: Obtaining instance from timeline?

[acg]

I believe the typical way to create a ScrollTrigger associated with a timeline animation would be something like this:

gsap.to(".box", {
  scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once)
  x: 500
});

Which internally I assume must create a ScrollTrigger instance.

 

But how can I then obtain the created instance if I want to manipulate it later?

 

I know you can create ScrollTrigger instances with something like:

ScrollTrigger.create({
  ...
  }
});

And that will return the ScrollTrigger instance. But do I then have to give up the convenience of the first syntax if I want to do something to the ScrollTrigger instance at some point in the future?

 

And if I do have to give that up, would the proper way to do that look something like:

var timeline = gsap.to(".box", {
  x: 500
});

var scrollTrigger = ScrollTrigger.create({
  animation: timeline
  }
});

// scrollTrigger can now be saved for future use

Thanks for your advice!

[ZachSaucier]

Hey acg. If you log a tween you can see all of the objects attached to it. To get the ScrollTrigger of a tween just use .scrollTrigger.

See the Pen abZzOYe by GreenSock (@GreenSock) on CodePen

 

55 minutes ago, acg said:

And if I do have to give that up, would the proper way to do that look something like:

var timeline = gsap.to(".box", {
  x: 500
});

var scrollTrigger = ScrollTrigger.create({
  animation: timeline
  }
});

// scrollTrigger can now be saved for future use

Yes, that's probably easier for other developers to understand and the way we recommend to do it in general  

[acg]

Hmm. After I create the Tween (which happens to be using .fromTo() ), the resulting Tween doesn't seem to have any ".scrollTrigger" property.

 

I confirmed your example and I see what you are talking about. But I can't yet explain why I'm not seeing the same behavior. My specific example is pretty complicated so I'm going to have to try to strip it down to see if I can simplify it and/or note any differences.

[acg]

Solved! In my code I was actually "adding a Tween to a Timeline" and the ScrollTrigger was actually configured for the Timeline. So, naturally the Tween object wouldn't have a ".scrollTrigger" property.

 

The Timeline object does have the ".scrollTrigger" property exactly as you documented in your reply. Thank you so much helping me understand!