Start a gsap Timeline with ScrollTrigger onEnter variable.

[steve02x]

Hi Community!

 

I was thinking about to start a normal gsap.timeline event(anim.play) with a ScrollTrigger onEnter callback. Is it possible to start an animation with it or should i track the user position with an extra javascript plugin and start it separately?

 

best wishes,

Steve.

[ZachSaucier]

Hey Steve and welcome to the GreenSock forums.

 

I'm not really understanding your question. Can you please create a minimal demo and try to better explain your question/the situation?

 

[GreenSock]

@steve02x do you mean something like:

let animation = gsap.timeline({paused: true});
tl.to(...); // add stuff
    
ScrollTrigger.create({
  onEnter: () => animation.play()
});

?

 

If so, sure, but it'd probably be even easier to tap into toggleActions. The default toggleAction is to play() onEnter anyway. You can build it right into your timeline...

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#id",
    toggleActions: "play none reverse none"
  }
});
tl.to(...); // add animations

See the docs for details: https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

[steve02x]

@GreenSock Hi Jack! Yes exactly! I tried the second one in my project but i made a mistake. I forgot to insert the "}" after the scrollTrigger implementation. Sorry Jack, its not my day. Such a simple thing 😴

 

Thank you for quick help and keep the great work up! 

 

Best wishes,

Steve.