eponymous

Thanks Visual-Q, once works are desired.

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