jmsv Posted August 17, 2022 Share Posted August 17, 2022 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! Link to comment Share on other sites More sharing options...
GreenSock Posted August 18, 2022 Share Posted August 18, 2022 I hadn't thought about that edge case, but I believe it's fixed in the upcoming release now which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js Better? 1 1 Link to comment Share on other sites More sharing options...
jmsv Posted August 18, 2022 Author Share Posted August 18, 2022 @GreenSock wow you're the best, that solves both issues. Thank you! 2 Link to comment Share on other sites More sharing options...
jmsv Posted August 19, 2022 Author Share Posted August 19, 2022 @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 Link to comment Share on other sites More sharing options...
Cassie Posted August 20, 2022 Share Posted August 20, 2022 Heya! Could you pop together a minimal demo for us? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now