How to forbid timeline update?

[gloria-dee]

Hi guys,  an update problem was encountered in my project. I wrote a simplified version in the codepen.

 

The timeline contains two animations.

 

When the animation plays, the animation update function will be triggered， and the timeline update function will  also be triggered .

 

I hope the first animation play triggers the timeline update, the second animation play will not trigger the timeline update.

 

How to prevent the timeline update function when the second animation is playing?

 

Hope for your reply.

Many thanks.

See the Pen wvEZgvy by gloria-dee (@gloria-dee) on CodePen

[Rodrigo]

Hi,

 

As far as I know is not possible. Timelines are containers for Tweens with some special properties but they do share some common things such as playheads. When you put a Tween inside a Timeline you're basically commissioning the Timeline to update the Tween's playhead, which the timeline does with it's own playhead, so both playheads are updated on every tick.

 

There are some workarounds for this though.

 

One is to create a boolean and check for it on the Timeline's update callbak:

let tweenStarted = false;

const master_timeline = gsap.timeline({
  paused: true,
  onUpdate: () => {
    if (tweenStarted) return;
    console.log(333, "timeline update");
  }
});

const box1_anim = gsap.fromTo(
  "#box1",
  { x: 100 },
  {
    x: 500,
    duration: 2,
    immediateRender: false,
    onUpdate: () => {
      console.log(111, "box1_update");
    }
  }
);

const box2_anim = gsap.fromTo(
  "#box2",
  { x: 100 },
  {
    x: 500,
    duration: 2,
    immediateRender: false,
    onStart: () => tweenStarted = true,
    onUpdate: () => {
      console.log(222, "box2_update");
    }
  }
);

Another is to add a call method in the timeline in order to start the second Tween. Also you can use the onComplete callback in the first tween as well.

 

I'm pretty sure that there are other ways to achieve this, that will depend on how convoluted your entire setup is, but those are the ones that come to mind right now.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

I think this is an engineering problem. Why not do one of the following?: 

1. Just apply the onUpdate to the child tween(s) that you want to trigger it? (instead of having the onUpdate on the parent timeline)
2. Or don't put the 2nd tween into the timeline? You can still have it wait a certain amount of time before starting - just use the delay property. 
3. Or check the isActive() of the 2nd tween to conditionally execute code: 

   See the Pen gOdyqNm?editors=1010 by GreenSock (@GreenSock) on CodePen