jmsv

Sorry I realized this must be an issue in the existing project I picked up rather than in GSAP. I recreated a minimal demo: minimal demo here You have to view in "debug mode" for the scroll restoration to work, but "on enter" and "on leave" do fire when the page scrolls to the recorded position on initial load: https://share.cleanshot.com/psjDPLxt Let me know if you have any guesses why these events wouldn't be firing in a different project. I thought the GSAP code was being loaded too late on the page so I bumped it up to the top of the global `</body>` code, but no luck. Might be one of the other external libraries they're loading.

@GreenSock is there an event that's fired when ScrollTrigger is active when the page is loaded already scrolled? I'm looking to manually control the easing for forward vs. reverse by hooking into onLeave and onEnterBackbut it doesn't seem like either of those fire on initial load.

How would this work when the timeline is using `scrollTrigger`? Would I still start the timeline paused, and then use the `onLeave` callbacks to manually call tween the timeline with different easings?

This was totally on me, I'm not sure exactly why but wrapping my `gsap` code inside of `webflow.push()` was preventing it from running when the page was already scrolled. Moving it outside of that function did the trick. window.Webflow = window.Webflow || []; window.Webflow.push(() => { /* gsap, etc — doesn't work */ }); /* works */ gsap.to(...

My page has a collapsible nav. The trigger element is absolutely positioned 128px below the top of the screen. When it exits, the nav collapses. This works fine if the page starts at the top, but if the page is already scrolled, the scroll trigger doesn't fire. If I set `scrub: true` it works fine. What's the best way to handle this use case? Demo Video: https://share.cleanshot.com/QpmnJfM1 Snippets: const tweenNavBar = gsap.timeline({ scrollTrigger: { trigger: ".nav-bar_trigger", start: "top 128px", end: "top top", toggleActions: "none play reverse none",

@GreenSock ah I spoke too soon, this actually only fixed the first issue. I'm still hitting the edge case where when the page is scrolled while loading, the ScrollTrigger animation is stuck at 1% complete instead of 0%. Could it be the case that if ScrollTrigger is manually refreshed while loading and/or scrolling, it mistakes the 1% for the initialValue? Here's what I'm seeing: https://share.cleanshot.com/SD01zW Load the page already scrolled, the `.footer_content` has the correct initial values of `opacity: 0` `visibility: hidden`, but then I scroll up and the 1% is applied, even though the animation never intersected. Once that's set to 0.057 opacity and visibility: inherit, it overlays the rest of the page and makes elements unclickable

@GreenSock wow you're the best, that solves both issues. Thank you!

Apologies in advance for no codepen, I can build one out but I'm hopeful my questions are more "what is GSAP's behavior" rather than "is there a bug in my code". Two situations, both related to pages with multiple ScrollTriggers. Here's a page that demonstrates both, but the videos are more illustrative. 1 — Fast Scrolls How is `fastScrollEnd: true` handled with `play reverse play reverse` toggleActions? It seems that my animation is stuck in the end state if I scroll quickly past it, but I only want this to be the case in `play none...`. Shouldn't the animation still be reversed if you fastScroll? Here's how it looks when scrolling at a normal rate: https://share.cleanshot.com/pMFCVU And here's how the background color gets stuck on fast scroll: https://share.cleanshot.com/lyT2r1 I want to keep the `fastScrollEnd: true` behavior for other pages that have multiple background color triggers—the `preventOverlap: true` and `fastScrollEnd: true` is doing exactly what I need for those pages. Here's the base of the setup: const toggleActions = isKept ? 'play none play reverse' : 'play reverse play reverse'; const tweenBackgroundColor = gsap.timeline({ scrollTrigger: { trigger: target, toggleActions, id: 'background-color', // markers: true, start: 'top 70%', end: 'bottom 70%', duration: 0.35, preventOverlaps: true, fastScrollEnd: true, ... 2. Page Loaded Already Scrolled + Scrolled While Loading This one's weird but it's introducing bugs because I rely on the `onReverseComplete` event of my `footer` animation to toggle content visibility. Here's the footer effect working as intended: https://share.cleanshot.com/KJxbHW And here's the issue: https://share.cleanshot.com/wGvfew When the page is loaded already scrolled near the footer animation start / end, and you scroll up during loading, you end up in a broken state of the animation, where the end state for `.main-wrapper` is `opacity: 0.993` instead of `opacity: 1`, and the `onReverseComplete` event never triggered, which has logic to control certain content visibility. The footer animation's onReverseComplete event is responsible for hiding the footer's visibility, so that the main content is clickable. This is already kind-of a hack, if `autoAlpha: 0` was being fully executed then the footer content would be hidden, but the animation seems to be stuck at 99% complete if you scroll while the page is loading. tweenFooter = gsap.timeline({ scrollTrigger: { trigger: footer, toggleActions: 'play reverse none reverse', start: () => 'top 58%', end: () => 'top 50%', scrub: 1, id: 'footer', // invalidateOnRefresh: true, refreshPriority: -1, markers: true, fastScrollEnd: true, onEnter: () => { console.log('Footer Trigger Enter'); document.querySelector( '.main-wrapper' ).style.pointerEvents = 'none'; document.querySelector( '.footer_content' ).style.overflow = 'scroll'; ScrollTrigger.getById( 'nav-background-scroll' ).disable(); }, onLeaveBack: () => { console.log('Footer Trigger LeaveBack'); document.querySelector( '.main-wrapper' ).style.pointerEvents = 'auto'; document.querySelector( '.footer_content' ).style.overflow = 'hidden'; ScrollTrigger.getById('nav-background-scroll').enable(); }, Really appreciate any help / direction on this, thank you!

@GreenSock yep, works like a charm. Thank you—and thanks @PointC! Two quick follow-ups if you have the time: 1. Launching this site around the end of the month—do you think the beta will release by then / safe to use the beta in prod? 2. Is GSAP handling throttling / debouncing automatically or should I add logic to debounce something that's fired as often as `mousemove`?

I'm looking to create the effect seen here: https://share.cleanshot.com/w14HYe In the current site there's a `maximum call stack error` that's thrown in the `mousemove` event, surfacing from `addPropTween`. I recreated the setup in codepen, and I don't see the call stack error, but the animation doesn't work either. I'm trying to use the `gsap.quickTo` method I've seen in other `mousemove` animations throughout the docs and forums. Really appreciate any help!