Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
shiphter

TimeLineLite logic not restarting smoothly

Recommended Posts

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 post
Share on other sites

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.

  • Thanks 1
Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×