BrandonI

I just want to update, instead of the kill() method, I swapped it out with clear() to allow the previous animation to finish instead of stopping it in its tracks.

Wow fantastic reply, thank you! Works like a charm.

For anyone looking for an answer to this, i've added the `clear()` method at the start of both the onEnter & onLeaveBack methods. Did not give expected results.

Hey Guys, This is my first foray into using gsap and i'm really enjoying it so far. One of the questions that I can't seem to find through the forums is cancelling a queue of a timeline. I'll give an example with what I'm trying to do. I have a trigger to to hide my navigation and display a menu when a user scrolls down a page. I'm using the onEnter & onLeaveBack methods to trigger animation events. I noticed if I scroll up and down quickly enough (many times) - the animation queue will play through all the events - as expected. I was wondering whats the best way to prevent the entire queue of animations to play through multiple times and just play the last item in the animation event stack. I'm assuming its using the kill() method, but I haven't found the best place to put it. For context, i'm using react (hence the refs) inside a useEffect, here's just the actual timeline. navTimelineRef.current = gsap.timeline({ scrollTrigger: { trigger: document.body, start: `${window.innerHeight / 2} top`, end: 'max', markers: true, fastScrollEnd: true, invalidateOnRefresh: true, onEnter: () => { // Nav items stagger away navTimelineRef.current.to(navRef?.current?.children, { autoAlpha: 0, stagger: 0.2 }); // hamburger nav comes into view navTimelineRef.current.to(hamburgerRef.current, { autoAlpha: 1 }); // logo icon scales up navTimelineRef.current.to(hamburgerLogoRef.current, { scale: 2 }); }, onLeaveBack: () => { // logo icon scales back down navTimelineRef.current.to(hamburgerLogoRef.current, { scale: 1 }); // hide the hamburger menu navTimelineRef.current.to(hamburgerRef.current, { autoAlpha: 0 }); // reverse stagger back in the menu items navTimelineRef.current.to(navRef.current.children, { autoAlpha: 1, stagger: 0.2, reversed: true }); } } }); Appreciate any feedback, thanks!