Jump to content
Search Community

ScrollTrigger: Animating multiple elements when they enter viewport

eponymous test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

If I'm understanding your issue I think you're looking for once: true not a toggle action. 

 

once:

Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none".

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...