Jump to content

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

Timeline.restart(), with child timelines

Recommended Posts

Hey! Longtime user, sometime-poster. I'm working on some ads that have a replay button. I have a secondary animation that plays at the beginning of my main timeline. That secondary animation is generated by a function that returns a timeline, and is called using add().


Secondary animation looks something like this:

function makeWaves() {
  var tl = new TimelineLite();
    .add('start', 0)
    .fromTo('#wave1 .teal', 10, {drawSVG:"0 35%"}, {drawSVG: "0% 95%"}, 'start')
    .fromTo('#wave1 .navy', 10, {drawSVG:"35% 100%"}, {drawSVG: "95% 100%"}, 'start')

    .fromTo('#wave2 .blue', 10, {drawSVG:"0 30%"}, {drawSVG: "0 90%"}, 'start')
    .fromTo('#wave2 .navy', 10, {drawSVG:"30% 100%"}, {drawSVG: "90% 100%"}, 'start')

    .to('#wave3 .blue', 10, {drawSVG: "80%"}, "start")
    .to('#wave3 .navy', 10, {drawSVG: "70%"}, "start+=2");

  return tl;


Main timeline looks like this:

        .addLabel("start", 0)
        .to(this.miranda, 0.6, {autoAlpha: 0}, 3.5)
        .add("f1", 3.7)
        .add(makeWaves(), "f1")
	//... more awesome animation


When I hit the replay button, which calls timeline.restart(), my secondary animation doesn't fire. I tried setting timeline.restart(false, false) to avoid suppressing callbacks, but no dice.


I also tried using exportRoot(), but I've never really been 100% sure how that works. Maybe I'm misunderstanding the use-case for this feature?


Anything jump out at you guys that I might be missing? This seems implausible, but any reason using drawSVG would be part of the problem?


I might try to put up a CodePen, but this is agency work, which is NDA'd by default, so I don't think I can share it publicly.


Thanks guys!

Link to comment
Share on other sites

I'm not seeing anything that shouldn't work with restart().  


Are you saying the whole timeline doesn't play on restart()? Or the timeline plays, but doesn't include the nested timeline returned from your makeWaves() function? Maybe you could put together a CodePen demo, but just use a few SVG lines, rectangles etc. instead of the actual client assets. Just enough to show the problem would be great.

  • Like 2
Link to comment
Share on other sites

Yeah, like @PointC I don't notice anything obvious that's "wrong", but I wonder if you've got some overwriting/conflicting tweens somewhere. A quick way to test is to add:


TweenLite.onOverwrite = function() {


A codepen demo would be SUPER helpful. No need to post your whole project - just a reduced test case with generic content (honors the NDA). 

  • Like 3
Link to comment
Share on other sites

That's neat. I must confess - I was not familiar with the .onOverwrite property before now. I guess I have to get out of the TweenMax section of the docs and visit TweenLite once in a while. ;)

  • Like 3
Link to comment
Share on other sites

@PointC the timeline restarts, but nested animation doesn't seem to play. I will try and cook up a demo and see if I can replicate what's going on on my end. Thanks for the suggestion about .onOverwrite, @GreenSock, I will give that a shot as well.

Link to comment
Share on other sites

Ok, here's a codepen demo. Let the animation play all the way through until the strokes disappear; then click the  rewind button - the lines redraw, and nothing happens during the makeWaves() part of the animation. Then suddenly, the wavesOut() part of the timeline kicks in and they transition out. Weird, right?

See the Pen QVqrZQ by flysi3000 (@flysi3000) on CodePen


Link to comment
Share on other sites

Yep, as I suspected, you've got overwrites/conflicts happening. If you add this to your code, you'll see it:


TweenLite.onOverwrite = function() {


Basically, you have overlapping tweens that are fighting for the same property value simultaneously. That's generally not a good thing and it means you should rework your animations to avoid it. But if you want to just skip overwriting across the board (easy "fix", but be careful), you could do:


TweenLite.defaultOverwrite = false;


Or set overwrite:false in any of the afflicted tweens if you want to control it per-tween. 


Does that help? 

  • Like 4
Link to comment
Share on other sites

Thanks for the demo. Yes, it's an overwrite situation as @GreenSock thought. Drop this code into the beginning of your JS and you'll see the difference.


TweenLite.defaultOverwrite = "false";


It doesn't make any difference that this is a DrawSVG tween. The same thing can happen with any type of tween. When you create a fight and overwrite a tween you end up with a new starting point. 


I think you're trying to have the tail end of those strokes 'chase' the other end off screen? If so, you're basically trying to create two DrawSVG tweens on the stroke at the same time and that won't work. You'll probably have to rework this a bit or use a mask to erase them.


Happy tweening.



Edit: DOH! Jack already replied. 


  • Like 5
Link to comment
Share on other sites

You guys are the best. I'll do the easy fix for now (deadlines and such), but it's good that I experienced this, so I will definitely keep it in mind for the future!

  • Like 4
Link to comment
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.