Animate only within scrollTrigger bounds

[Romanus]

I have a looped animation. I want it to play only when the user sees it. How to do it?

 

If I have a lot of animations that run in the background, I think this will have a bad effect on performance.

 

I think this can be done using scrollTrigger, but I do not understand how exactly

See the Pen yLqmOoW by romanusname (@romanusname) on CodePen

[Rodrigo]

Hi,

 

Thanks for the super simple codepen example!

 

In the case of that particular example just use toggleActions:

gsap.to('.box',{
  x:200,
  yoyo:true ,
  repeat: -1,
  ease: "none",
  duration:2,
  scrollTrigger: {
    trigger:'.box',
    markers:true,
    toggleActions: "play pause play pause",
  }
})

From ScrollTrigger docs:

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

Let us know how it works.

Happy Tweening!

[Romanus]

8 hours ago, Rodrigo said:

Hi,

 

Thanks for the super simple codepen example!

 

In the case of that particular example just use toggleActions:

gsap.to('.box',{
  x:200,
  yoyo:true ,
  repeat: -1,
  ease: "none",
  duration:2,
  scrollTrigger: {
    trigger:'.box',
    markers:true,
    toggleActions: "play pause play pause",
  }
})

From ScrollTrigger docs:

toggleActions

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

Let us know how it works.

Happy Tweening!

Thank you! This works great. But I got a little problem.

If the section is "pin", the markers leave, but the element remains.

Because of this, the element stops earlier than I expect.

Can this be fixed somehow?

See the Pen XWBvMPO by romanusname (@romanusname) on CodePen

[Rodrigo]

Hi,

 

In that case you can use the callbacks from the ScrollTrigger that is pinning the section.

 

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

 

Hopefully this helps.

Happy Tweening!