ScrollTrigger: Handling fast scrolls & pages already scrolled on load

[jmsv]

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]

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? 

[jmsv]

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

[jmsv]

@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

[Cassie]

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.