Timeline.restart(), with child timelines

[flysi3000 49 Likes (Newbie)]

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();
  tl
    .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:

this.timeline
        .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!

[PointC 8,599 Likes (Superhero)]

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.

[GreenSock 8,117 Likes (Superhero)]

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() {
  console.log("OVERWRITE!!");
};

 

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). 

[PointC 8,599 Likes (Superhero)]

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. 

[flysi3000 49 Likes (Newbie)]

@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.

[flysi3000 49 Likes (Newbie)]

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

 

[GreenSock 8,117 Likes (Superhero)]

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

 

TweenLite.onOverwrite = function() {
  console.log("OVERWRITE");
}

 

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? 

[PointC 8,599 Likes (Superhero)]

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. 

 

[flysi3000 49 Likes (Newbie)]

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!