Hello everyone,
First time using this, so please excuse my terminology. I'm doing a THREE.js animation loop, where a bunch of textGeometries animate forming a box, sphere and cone. I'm using two timelines since I don't want the first transition(from initial state to forming a box) to repeat. So when restarting the second timeline on `onComplete`, it isn't doing a smooth transition. I'm unable to track down what's causing this, could anybody please help me figure out why the restart isn't smooth?
Below is the logic, followed by a codepen demo:
for (i = 0; i < MAX_PARTICLES; i++) {
var initialMorphTL = new TimelineLite();
var morphTL = new TimelineLite({onComplete:function(){this.restart()}});
const child = children[i];
initialMorphTL.to(child.position, 1, {
ease: Elastic.easeOut.config( 0.1, .3),
x: pointsInsideBox[ index ++ ],
y: pointsInsideBox[ index ++ ],
z: pointsInsideBox[ index ++ ],
delay: .1
}).to(child.material.color, 1, {
ease: Linear.easeNone,
r: boxColor.r,
g: boxColor.g,
b: boxColor.b,
}, "-=1");
morphTL.to(child.position, 1, {
ease: Elastic.easeOut.config( 0.1, .3),
x: pointsInsideSphere[ index ++ ],
y: pointsInsideSphere[ index ++ ],
z: pointsInsideSphere[ index ++ ],
delay: 5
}).to(child.material.color, 1, {
ease: Linear.easeNone,
r: sphereColor.r,
g: sphereColor.g,
b: sphereColor.b,
}, "-=1").to(child.position, 1, {
ease: Elastic.easeOut.config( 0.1, .3),
x: pointsInsideCone[ index ++ ],
y: pointsInsideCone[ index ++ ],
z: pointsInsideCone[ index ++ ],
delay: 5
}).to(child.material.color, 1, {
ease: Linear.easeNone,
r: coneColor.r,
g: coneColor.g,
b: coneColor.b,
}, "-=1").to(child.position, 1, {
ease: Elastic.easeOut.config( 0.1, .3),
x: pointsInsideBox[ index ++ ],
y: pointsInsideBox[ index ++ ],
z: pointsInsideBox[ index ++ ],
delay: 5
}).to(child.material.color, 1, {
ease: Linear.easeNone,
r: boxColor.r,
g: boxColor.g,
b: boxColor.b,
}, "-=1");
}