Trouble with the big chain of animation

[Sined12]

Hello everyone !

I need do the animation like on the GIF(wich attached below) , but how you see (in the CODEPEN) it is not like its should be...

I try do the same animation of 9 small squares which must fly away from the center through opacity 0 to 1 to 0 and all this time it should rotate...

I try to use FromTo , try do  this animation in new TimeLine something like this in this code below, but in this case the animation order starts to stray (maybe repeatDelay is a problem).

const tl2 = new TimelineMax({repeat:-1, repeatDelay: .615});

tl2.to([clones['clone0'],
    clones['clone1'],
    clones['clone2'],
    clones['clone3'],
    clones['clone4'],
    clones['clone5'],
    clones['clone6'],
    clones['clone7'],
    clones['clone8']], .3,{opacity: 0, rotation: 3,   ease: SlowMo.ease.config(.1, .1, false)})
    .to(clones['clone0'], .3,{ x: halfWidht-100, y: height/9,  opacity: 1, rotation: 350,   ease: SlowMo.ease.config(.1, .1, false) })
    .to(clones['clone1'], .3,{ x: halfWidht+100, y: height/7,  opacity: 1, rotation: 365,   ease: SlowMo.ease.config(.1, .1, false) },0)
    .to(clones['clone2'], .3,{ x: halfWidht+150, y: height/4,  opacity: 1, rotation: 355,   ease: SlowMo.ease.config(.1, .1, false) },0)
    .to(clones['clone3'], .3,{ x: halfWidht+250, y: height/3,  opacity: 1, rotation: 353,   ease: SlowMo.ease.config(.1, .1, false) },0)
    .to(clones['clone4'], .3,{ x: halfWidht+240, y: height/2,  opacity: 1, rotation: 367,   ease: SlowMo.ease.config(.1, .1, false) },0)
    .to(clones['clone5'], .3,{ x: halfWidht-100, y: height/1.8,opacity: 1, rotation: 357,   ease: SlowMo.ease.config(.1, .1, false) },0)
    .to(clones['clone6'], .3,{ x: halfWidht-200, y: height/2,  opacity: 1, rotation: 361,   ease: SlowMo.ease.config(.1, .1, false) },0)
    .to(clones['clone7'], .3,{ x: halfWidht-250, y: height/3,  opacity: 1, rotation: 350,   ease: SlowMo.ease.config(.1, .1, false) },0)
    .to(clones['clone8'], .3,{ x: halfWidht-150, y: height/4,  opacity: 1, rotation: 367,   ease: SlowMo.ease.config(.1, .1, false) },0)
   .to(clones['clone0'], .3,{ x: halfWidht-150, y: height/9.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone1'], .3,{ x: halfWidht+150, y: height/7.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone2'], .3,{ x: halfWidht+200, y: height/4.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone3'], .3,{ x: halfWidht+300, y: height/3.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone4'], .3,{ x: halfWidht+290, y: height/2.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone5'], .3,{ x: halfWidht-150, y: height/2.3, opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone6'], .3,{ x: halfWidht-250, y: height/2.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone7'], .3,{ x: halfWidht-300, y: height/3.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3})
   .to(clones['clone8'], .3,{ x: halfWidht-200, y: height/4.5,   opacity: 0, rotation: '+=100',   ease: SlowMo.ease.config(.1, .1, false), delay: -0.3});

Maybe anyone have a some idea how implement the animation of the 9 squares ?

Thank you in advance !

See the Pen QzPLwG by Sined12 (@Sined12) on CodePen

Edited January 17, 2019 by Sined12

[Carl]

Hi and welcome to the GreenSock forums,

 

Nice job on the animation. Looking good.

 

I don't really know what you mean by "the animation orders starts to stray". I looked at it a bunch of times and to me it always looks the same.

 

Please keep in mind it is extremely difficult to look at 200 lines of code and try to make sense of it. Especially when we have no idea what things like clone6 and clone5 actually look like or where they are supposed to be.

 

GSAP's timing is also super precise. On each update it renders things where they should be at that time... even under stress. 

 

I wonder if perhaps your negative delays are causing some problems. A negative delay isn't really logical. Can you wait -3 seconds for something to happen?

 

I would strongly suggest you study the position parameter and use it to schedule when you want your tweens in your timeline to start

 

https://greensock.com/position-parameter

 

What you are doing as

 

tl.to(something, 1, {x:200, delay:-1}) 

 

should be

 

tl.to(something, 1, {x:200}, "-=1");// start this animation 1 second before the previous animation ends.

 

It would greatly help if you could make those changes AND simplify the demo as much as possible. Remove all unnecessary tweens and clearly describe the behavior you are seeing that you are not expecting.

 

Thanks!

 

 

[explorerzip]

Another thing you might want to do is use a tween duration of 1 instead of 0.3 so it's easier to see / troubleshoot what is going on. Then use the ".timeScale" method to speed up or slow down your whole animation.