How to reverting a timeline animation created with sequence ? #3269
Description
How can I rewind an animation in the active slide to the starting point when the slide changes? I create the animation with Timeline sequences, each slide animation works, but when I switch to the next slide I have to rewind the Timeline sequences on the previous slide.
const sequence = [];
const { content, subheading, titleLines, buttons, splitInstance } = slideAnimations[index]
if (content) { sequence.push([content, { opacity: [0, 1] }, { duration: 0.1 }]) }
if (subheading) { sequence.push([subheading, { opacity: [0, 1] }, { duration: 0.4, at: "-0.1" }]) }
if (titleLines.length) { sequence.push([titleLines, { y: ['100%', 0] }, { duration: 0.8, ease: "easeInOut", delay: stagger(0.05), at: "-0.4" }]) }
slideAnimations[index].timeline = animate(sequence)
I created a reset function, the index value in the function is the index value of the previous slide. in this way I could not bring the contents of the animation to the starting position.
const resetContent = (index) => {
const { timeline } = slideAnimations[index]
if (timeline) {
timeline.cancel();
slideAnimations[index].timeline = null;
}
}