Sined12

Its not helped

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 !

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 !