[problem with color changes]

Its not helped

[problem with color changes]

Hello everyone !
 

Can someone tell me why, in my animation, the first color changes are made instantly, but the second time already smoothly (0.3 seconds) is animated as needed.

What's wrong in my code?

Thanks you in advance !

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

[Trouble with the big chain of animation]

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