Hello gang!
I'm trying to animate multiple elements when they enter the viewport. I'm using ScrollTrigger.batch(). Previously I was using GSAP v2 with ScrollMagic to accomplish this. But on discovering ScrollTrigger, I decided to try it instead along with GSAP v3.
Please see the linked Codepen below for reference. In this Codepen I have 3 boxes which rotate 360 degrees when they enter the viewport.
My problem is that I only want each element to animate once. I don't want the animation to repeat when the box reenters the viewport. I tried setting the toggleActions property to fix this as follows: toggleActions: "play none none none". However this doesn't work (in fact those are just the default settings for toggleActions , so it should behave accordingly by default.)
The first way I tried was to use ScrollTrigger.batch() as follows:
ScrollTrigger.batch(".box", {
onEnter: batch => {
gsap.from(batch, {rotation: 360, duration: 2})
},
toggleActions: "play none none none"
})
The other way I tried is to first select all the boxes and then apply the animation to each, as follows:
let boxes = document.querySelectorAll('.box');
boxes.forEach( function( elem ) {
gsap.from(elem, {
scrollTrigger: {
trigger: elem,
toggleActions: "play none none none"
},
rotation: 360,
duration: 2
})
})
However, I still have the aforementioned problems with this approach.
My other problem is that sometimes the animation doesn't start from the correct starting point, but the box will get stuck in a rotated position and start from there.
Some guidance would be greatly appreciated.
-Ron