Tween start callback/end callback, timeline start callback not getting fired in following code

[Mukund Kumar]

I am new to gsap and currently exploring gsap timeline. in the following code, Tween start callback/end callback, timeline start callback and parentTimeline start callback not getting fired. but if the duration value is greater than 0, then it works. is there anything that i miss in the following code  in order to work these callback properly ?

 

const parentTimeline = gsap.timeline();
const timeline = gsap.timeline();
const tween = gsap.fromTo("h1", {x: 0}, {x: 300,  duration:0});
timeline.add(tween);
tween.eventCallback("onStart", () => {
     console.log("tween start callback")
 });
timeline.eventCallback("onStart", () => {
  console.log("timeline start callback")
});
tween.eventCallback("onComplete", () => {
     console.log("tween end callback")
 });
parentTimeline.add(timeline, 0);

timeline.eventCallback("onComplete", () => {
  console.log("timeline end callback")
});
parentTimeline.eventCallback("onStart", () => {
  console.log("parentTimeline start callback")
});
parentTimeline.eventCallback("onComplete", () => {
  console.log("parentTimeline end callback")
});

 

See the Pen rNwvRRz by mukundkmr (@mukundkmr) on CodePen

[OSUblake]

Welcome to forums @Mukund Kumar

 

Are you trying to do anything in particular? Having callbacks placed at 0 time is a tricky situation. Like onStart from the docs. The time never changes, so it never started because there is no animation. It just get sets.

Quote

onStart

A function to call when the animation begins (when its time changes from 0 to some other value which can happen more than once if the tween is restarted multiple times).

 

Your onComplete won't work because the tween has already completed before you add it via eventCallback.

const tween = gsap.fromTo("h1", {x: 0}, {x: 300,  duration:0});

// !!! tween has completed

tween.eventCallback("onComplete", () => {
     console.log("tween end callback")
 });

 

That's why I would recommend putting your callbacks in the vars object like this.

const tween = gsap.fromTo("h1", {x: 0}, {
  x: 300,  
  duration:0,
  onComplete() {
    console.log("tween end callback")
  }
});

// tween end callback

 

0 duration tweens are the same as set, which is what you should use instead if you're just setting something.

https://greensock.com/docs/v3/GSAP/gsap.set()

https://greensock.com/docs/v3/GSAP/Timeline/set()