eponymous Posted September 2, 2020 Share Posted September 2, 2020 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 More sharing options...
Visual-Q Posted September 2, 2020 Share Posted September 2, 2020 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". 5 Link to comment Share on other sites More sharing options...
eponymous Posted September 3, 2020 Author Share Posted September 3, 2020 Thanks Visual-Q, once works are desired. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now