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

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