hghristov Posted February 16, 2021 Share Posted February 16, 2021 Hello, I have a design where I can click on some items to select them, then click a button to save them. Upon clicking the button I need to animate the items I've selected (simultaneously, no stagger between them), then after the items have finished moving I need to animate the button I've clicked, and then fade out everything on the page. I've separated my timelines in functions. In my first function I'm looping through an array of items and calculating the X and Y positions they will animate to, based on their initial position. I haven't included this in the codepen but I'm writing it to explain why I'm using a loop instead of directly passing an array or a CSS selector. My problem is that animating with a timeline inside the loop causes each item to wait for the previous one to finish moving instead of all elements animating simultaneously. I've made a simplified demo on codepen which shows exactly what my issue is. I'm probably missing something simple but I can't figure out what it is or come up with a workaround. See the Pen PobmYGr by hristovv (@hristovv) on CodePen Link to comment Share on other sites More sharing options...
Solution tailbreezy Posted February 16, 2021 Solution Share Posted February 16, 2021 for (const box of boxes) { timeline.to(box, { x: 200, },0) timeline.to(box, { y: Math.floor(Math.random() * (50 - 10 + 1) + 10), },'>') } Not sure what you are after but if you want all the boxes to move simultaneously on the X and then simultaneously on the y. Also, if you additionally want to match timeline2, you can add a label to master and attach timeline2 there. const master = gsap.timeline() master.add('tlStart'); master.add(functionOne()) master.add(functionTwo(),'tlStart') See the Pen 86f651c2adbbc6202d5ac7f8d1d944c8 by dadacoded (@dadacoded) on CodePen 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 16, 2021 Share Posted February 16, 2021 Hey hghristov and welcome to the GreenSock forums. There are a lot of ways to approach this sort of thing but the one that tailbreezy provided is a good one. For more information see the position parameter post. Link to comment Share on other sites More sharing options...
hghristov Posted February 17, 2021 Author Share Posted February 17, 2021 Thank you tailbreezy and ZachSaucier for replying, that's exactly what I needed. I was missing the position parameter on lines 12 and 16. 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