modifying ScrollTrigger start values based on direction

[emjay]

Hi @all,
 

I am trying to change the ScrollTrigger start values based on the scroll direction. The background is a fixed navigation that is shown when scrolling up and hidden again when scrolling down. The initial value for scroll trigger is correct, but I don't really know how to change the value when scrolling up again.

I've read threads like this one, however in @mikel example I don't have the values of self.direction in onRefresh that I have in onUpdate, however I can't seem to change the start value in onUpdate.
 

Maybe you can help me to untangle the whole thing for me. 
 

mm.add("(min-width: 600px)", () => {
    // Fixed nav stays on top
    ScrollTrigger.create({
        trigger: element,
        start: 'top top',
        endTrigger: 'html',
        end: 'bottom top',
        toggleClass: { targets: element, className: 'fixed' },
        onEnter: () => element.style.height = `${inner.offsetHeight}px`, // prevent jumping by setting a placeholder height
        onLeaveBack: () => {
            element.style.height = 'auto';
            inner.style.top = 0;
        },
        onUpdate: self => {
            if (self.direction === 1) {
                // scrolling down, reset using the original "start" value
                self.start = self.start + self.trigger.clientHeight;
            } else {
                // scrolling up, using the modified "start" value
                self.start = self.start - self.trigger.clientHeight;
            }
            self.refresh();
        },
        markers: true
    });
})

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. 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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[emjay]

Here is the missing demo pen.
 

Scroll down once to element 2 and you will see that the fixed header disappears and the blue anchor nav docks correctly at the top of the screen. If you slowly scroll back up from element 2, the header will be visible again. The anchor nav moves down nicely accordingly. So far, so good.
 

If you now scroll up further to 3,2,1 JUMP - you will see that the Anchor Nav jumps back to its old position.
This is exactly the jump I want to avoid.

The start values are completely correct for scrolling down, only when scrolling up they have to be shifted by the height of the navigation so that the jump does not occur.

See the Pen 56b17e4f104193f5beba7a6bbbd30926?editors=1111 by emjay (@emjay) on CodePen

[Rodrigo]

Hi,

 

Take a look at this thread:

 

Here is the final example that seems to work in the way you intend:

See the Pen RwqbBWo by GreenSock (@GreenSock) on CodePen

 

Also take a look at this one as well:

See the Pen RwqGbxG by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[emjay]

Hi @Rodrigo,

it took me a while to come back to this, but with a fresh head I came up with a slightly different idea.
With a combination of a dynamic top of the viewport value for the start marker and ScrollTrigger.refresh(); it works fine:
 

See the Pen b470cafeaf6e4f2fd39203126e8f3f67 by emjay (@emjay) on CodePen

I think it's totally fine to do it that way, don't you?  

[emjay]

I also made a version which is using pinning, thus significantly narrower again.

See the Pen 9b8c27483758f960c57475c201241013 by emjay (@emjay) on CodePen

[Rodrigo]

That's great! Regarding the code, as @mvaneijgen says: "if it works, it works". If the code you have in place is doing what you need then just keep it.

 

Thanks for reporting back and sharing your solution with the community, I'm  sure many users will benefit from your generosity! 💚

 

Happy Tweening!