Timeline inside loop causing stagger

[hghristov]

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

[tailbreezy]

  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

[ZachSaucier]

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.

[hghristov]

Thank you tailbreezy and ZachSaucier for replying, that's exactly what I needed. I was missing the position parameter on lines 12 and 16.