I am not able to get an onStart to work, though the onUpdate and onComplete work fine: These snippets are part of a larger vanilla javascript file. I want to know when this timeline starts and when it ends so I can update a DOM text element while the animation is running and remove the text once it is completed.
//onUpdate will also call the upDateCounter function and log "once" to the console (only repeatedly, versus one time for onComplete):
let tlWireframe = new TimelineMax({ onComplete: updateCounter });
function updateCounter() {
console.log("once");
}
//The remainder of this code is just the multi-tween Timeline,
tlWireframe
.fromTo(
".wireframe-sitemap",
3,
{ autoAlpha: 0, x: -900 },
{ autoAlpha: 1, x: 0, ease: Power2.easeOut, delay: 0.3 }
)
.to(".wireframe-sitemap", 3, {
autoAlpha: 0,
x: 1800,
ease: Power2.easeIn,
delay: 1
})
.fromTo(
".panel",
3,
{ autoAlpha: 0, transform: "rotateY(-90deg)" },
{
autoAlpha: 1.25,
transform: "rotateY(0deg)",
ease: Power2.easeOut,
delay: 0.5
}
)
.fromTo(
".wireframe-swimlane",
3,
{ autoAlpha: 0, x: -900 },
{ autoAlpha: 1, x: 0, ease: Power2.easeOut, delay: 0.3 },
"-=1"
)
.to(".panel", 3, { autoAlpha: 0, transform: "rotateY(90deg)" }, "-=.25")
.to(".wireframe-swimlane", 3, {
autoAlpha: 0,
x: 1800,
ease: Power2.easeIn,
delay: 1
});