BruceST Posted January 26, 2023 Share Posted January 26, 2023 I have 3 boxes and I want to animate-in each box individually I created a timeline for the animation and I'm using gsap.utils.toArray to animate each box sequentially However now I want the second box to start animating x duration before the first box is finished and the 3rd box x duration before the 2nd is finished etc. Is there a way to do that with gsap.utils.toArray ? Where and how should I adjust it? See the Pen eYjrVdz by bruce-persaud (@bruce-persaud) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted January 26, 2023 Solution Share Posted January 26, 2023 Hi @BruceST, you where already using the position parameter and with this you can also set a relative offset to a tween, eg "-=0.3" will start the animation 0.3 seconds before the previous ends. In your setup the only tricky part is that you don't want this to happen with the first item. So what I did is check if the index of your loop is not 0 and then add this offset to your tweens. Keep in mind that a default tween in GSAP (if you do not define it) is 0.5 seconds. Hope it helps and happy tweening! See the Pen abjGqqV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
BruceST Posted January 27, 2023 Author Share Posted January 27, 2023 Awesome thank you 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