Search the Community
Showing results for tags 'timeline reset clear'.
Found 1 result
-
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?
