Hopefully I can get some help with this timeline clear / reverse issue without a codepen.
Functionally, this code works:
const desktopMedia = window.matchMedia( "(min-width: 1200px)" );
const timeline = gsap.timeline({
paused: true,
onReverseComplete: () => { timeline.clear(); }
});
function = () => {
if (desktopMedia.matches){
/* desktop */
timeline
.set( ... )
.set( ... )
.set( ... )
.addLabel( ... )
.to( ... )
.to( ... )
.to( ... )
.to( ... )
.to( ... )
.to( ... )
.to( ... );
if (condition){
timeline.reverse();
} else {
timeline.play();
}
} else {
/* mobile */
timeline
.addLabel( ... )
.to( ... )
.set( ... )
.set( ... )
.set( ... )
.addLabel( ... )
.to( ... )
.to( ... );
if (condition){
timeline.reverse();
} else {
timeline.play();
}
}
}
However, since I am only clearing the timeline onReverseComplete, this is no good if the user resizes the window between desktop/mobile.
I would like to clear the timeline every time the function is ran and be able to run the new set of timeline tweens either forward or reverse.
When I add "onComplete: () => { timeline.clear(); }", it doesn't want to play the reset timeline in reverse.
What exactly is going on here?