shiphter Posted June 14, 2020 Share Posted June 14, 2020 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"); } See the Pen ExPybaO?editors=0010 by zainy (@zainy) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 Hey shiphter and welcome to the GreenSock forums. The version of GSAP that you're using is super old. We highly recommend that you upgrade to GSAP 3 because it has a sleeker API, a bunch of new features, and a smaller file size. As for your jumping, that's because when the playhead goes back to repeat, it resets the timeline variables back to the initial state. Since those variables are different than the end variables, of course there will be a jump. I recommend adding a new tween onto the end of your timeline that animates to the starting state. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 I see that this question has already been answered on StackOverflow. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now