limbo Posted February 5, 2021 Share Posted February 5, 2021 Hello I'm fairly new to GSAP (and loving it BTW) and completely new to the forums (👋). Using it in all commercial projects now. I'd like to set up a series of 'layers' on the page that scrub, using batch (So I only need to call the animation on a single class). This is what I have: ScrollTrigger.batch(".layer.anim", { onEnter: (elements, triggers) => { gsap.to(elements, { ease:'power1.inOut', delay:0.25, opacity: 1, stagger: 0.25, scrub:1, // added this, no joy.. duration:0.6, y:0 }); } }); I'd hoped adding 'scrub' to this would allow each layer to run onEnter... Does anyone have any ideas they can share for this? Thanks. Link to comment Share on other sites More sharing options...
limbo Posted February 5, 2021 Author Share Posted February 5, 2021 Pen: See the Pen rNWxodR?editors=0010 by liamcrean (@liamcrean) on CodePen Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted February 5, 2021 Solution Share Posted February 5, 2021 Hey limbo and welcome to the GreenSock forums. You're adding ScrollTrigger properties to the tweens vars object instead of the ScrollTrigger object. Move it and it should work: See the Pen eYBJbPo?editors=0010 by GreenSock (@GreenSock) on CodePen However, this setup doesn't make much sense. If you just want to create a ScrollTrigger and tween for each element with that class name I recommend just using a loop: See the Pen PobZXXJ?editors=1010 by GreenSock (@GreenSock) on CodePen I think you'd learn a lot from my article about animating efficiently. 1 Link to comment Share on other sites More sharing options...
limbo Posted February 5, 2021 Author Share Posted February 5, 2021 Thanks (and that was quick 😀) All makes complete sense. 👍 Link to comment Share on other sites More sharing options...
limbo Posted February 6, 2021 Author Share Posted February 6, 2021 19 hours ago, ZachSaucier said: I think you'd learn a lot from my article about animating efficiently. This was a great read. Thanks 👍 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