ncla

Thanks everyone for the replies and ideas. Probably should have been clearer in my initial post (sorry about that) because I just wanted to bring a potential bug to attention quickly, but yes, indeed, I want animation to happen only once, with scrubbing that has custom delay, and only in forward direction. This does work but only if if you are going forward direction. If you position your scroll after the trigger, refresh, and scroll upwards, it will be animating backwards. This is not an issue with the original Codepen approach because upon page reload it "skips" the animation because scroll position is past trigger area. As a workaround I ended up with something ridiculous like this. onComplete callback on Tweens does not provide scroll progress/direction, which made things quite wrangled for inexperienced me. The rather forceful delayed self.kill with setTimeout is there for when onLeave gets triggered on page load. const CharacterTween = gsap.from("#character", { filter: "blur(20px) grayscale(30%)", opacity: 0, autoRound: false, lazy: false }); const CharacterScrollTrigger = ScrollTrigger.create({ animation: CharacterTween, trigger: "#character", start: "top 70%", end: "bottom 80%", scrub: 0.45, onLeave: self => { if (self.progress === 1 && self.direction === 1) { self.getTween().eventCallback("onComplete", event => { self.kill(false) }) try { setTimeout(() => { self.kill(false) }, 500) } catch (e) { console.error(e) } } }, }); CharacterTween.eventCallback("onComplete", function() { CharacterTween.kill(false) CharacterScrollTrigger.kill(false) }); Let me know if you know a better way than this one. Thanks!

Argh, that's embarrassing. You are right, it is working! Thanks.

This seems to be a regression when going from 3.7.0 to 3.8.0 version. To reproduce, just scroll past the second spacer swiftly. You should see that the blur animation is stuck in time and the debug markers are removed.

Apologies for the late reply, some other things came up. As far as I can tell, setting lazy: false does not remedy the issue. I updated the Codepen, maybe you are able to reproduce it as well. However using the latest beta file does fix the issue. Thanks! When can I and other people expect a new version release? Also I unfortunately have another another bug regarding "once" functionality, but I will open another thread separately.

Thanks Cassie. I updated it to just number value, but issue seems to persist. Even more odd that for some rare refreshes it does trigger animation.

Today I decided to upgrade from older version 3.7.0 of GSAP. And I found out that about 1/3 of my animations stopped playing when they should. I narrowed it down to versions 3.8.0 and 3.9.1 between where the issues happens and does not. To reproduce: 1. Open the Codepen in /debug page (so as if it is just normal page without all the Codepen fluff) 2. (Kinda optional?) Position page scroll so that "scroller-start" marker is after "start" marker. Or in other words, scroll position should be where it would trigger the animation. 3. Refresh page There is no animation happening at all upon page load. Even more confusingly, the event onEnter is firing with appropriate progress value. If you downgrade the version for the JS files to 3.8.0 manually through Codepen, it works as intended. I went through the changelog on Github but found nothing that would suggest regression or that I should have went through some upgrade guide of sorts. Anyone knows what's up? Thanks.