ajayns Posted August 3, 2020 Share Posted August 3, 2020 I've got a bunch of elements I'm doing a stagger animation on. I'd like to set different properties (say scale/position) for each of these elements based on index of stagger. Is there a straightforward way of doing this with a single gsap call? The current solution I'm thinking of involves looping through the elements to get index and setting the properties and delay as per this with individual gsap calls in the loop. Any ideas are appreciated, I didn't make a codepen cause I felt like the description explained it well enough. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 3, 2020 Share Posted August 3, 2020 Hey Ajay and welcome to the GreenSock forums. 1 hour ago, ajayns said: Is there a straightforward way of doing this with a single gsap call? Your description is a bit general. It sounds like you want to use a functional value for the properties: gsap.to(".someClass", { x: 500, stagger: 0.1, scale: i => 1 - (i * 0.1), y: i => i * 20 }); If you'd like more specific feedback please make a minimal demo 2 1 Link to comment Share on other sites More sharing options...
ajayns Posted August 3, 2020 Author Share Posted August 3, 2020 Hey Zach, thanks a bunch, that answers my question. I was looking for the same - a way of getting index of current element as per stagger order using GSAP APIs. Sorry if that wasn't conveyed clearly. I wasn't aware of the functional method of setting properties, so this helps! 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