[ScrollTrigger: Animating multiple elements when they enter viewport]

Thanks Visual-Q,

 

once works are desired.

[ScrollTrigger: Animating multiple elements when they enter viewport]

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

See the Pen eYZGjwR by ronwade (@ronwade) on CodePen