Dr-Zee

I'm very new to GSAP. I'm using scroll events to trigger animations of the viewBox properties of an svg. The function fires when there is a scroll event, gets the new viewBox coordinates from the scroll target and animates the svg viewBox values to their new values: let viewBoxTarget = $('[data-anchor="' + destination.index + '"]').attr('data-viewport'); if (viewBoxTarget) { gallery.to(svg, { attr: { viewBox: viewBoxTarget } }); } This works almost perfectly on its own, but if you scroll past anchors faster than the animation duration, the animations will queue and get behind. Eventually you'll land on an anchor and the viewBox will execute more than one animation to catch up. I've tried invalidate() but that caused a lot of popping and jerking as the viewBox coordinates changed unpredictably with each invalidate() Is there a method of, when an event fires, the running animation can pause, then redirect to the new target?