ScrollTrigger Not Working When Used On An Allocated Timeline

[emilychews]

Hi,

 

I'm just starting out with the new ScrollTrigger plugin and I can get it play ball with the gsap.to object, but can't seem to get it work if I use it with  var tl = gsap.timeline(); and then tl.to ?

 

Can you only use the scrollTrigger plugin on a `gsap` object ?
 

gsap.registerPlugin(ScrollTrigger);

// GSAP TIMELINE

var tl = gsap.timeline();

tl.to(".box-3", {
  scrollTrigger: ".box-3",
  duration: 3,
  opacity: 0.1
});

Many thanks,

Em

 

See the Pen PoZYYLM by emilychews (@emilychews) on CodePen.

[AsKadir]

@emilychews Hey, Emily!

You should read the documentation about ScrollTrigger and check the video https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

ScrollTrigger should be inside timeline:

var tl = gsap.timeline({
  scrollTrigger: ".box-3",
});

tl.to(".box-3", {
  duration: 3,
  opacity: 0.1
});