Toggle Pin Scroll Trigger

[rear_differential]

Hello,

 

I have a component that needs to be pinned only when the user is scrolling down. In other words, while the user is scrolling down, a selected div will pin (position: fixed) and space will be added as needed. As the user scrolls up, the selected div is no longer pinned, no additional space is added, and it will not animate.

 

To do this, I was hoping there was a way to conditionally toggle the ScrollTrigger `pin` property based on self.direction, but it does not seem as straight-forward as that (perhaps due to how scroll trigger refreshes).
Based on the code below is there anyway to achieve this?

 

DEMO PEN:

 https://react-1dnq5j.stackblitz.io or https://stackblitz.com/edit/react-1dnq5j?file=src%2Fapp.js

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates 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 dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen.

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

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. ✅

[rear_differential]

Updated demo pen here: https://stackblitz.com/edit/react-1dnq5j?file=src%2Fapp.js or https://react-1dnq5j.stackblitz.io

 

 

Thanks again! 

[Rodrigo]

Hi,

 

As far as I can tell, what you're trying to achieve is not possible, at least not this way:

const trigger = ScrollTrigger.create({
  end: 'bottom+=1000 center',
  pin: self.direction > 0 ? true : false, // Would expect this to actively update everytime self.direction changed
  smooth: 0.7,
  start: 'top center',
  trigger: sequenceRefCurr,
  immediateRender: false,
  markers: true,
});

Pinning is not something that can be change like that based on the direction of the scroll.

 

The only idea that comes to mind right off the bat is to create two different ScrollTrigger instances, one that tracks the direction of the scroll and another that pins the element. Then based on the direction in the onUpdate method of the first one (the one that tracks the direction) enable/disable the second one. Just be aware that using normal pinSpacing this could give you some unexpected behaviour so I would suggest you to use pinSpacing: false, something like this:

// The ST instance that pins the element
const st1 = ScrollTrigger.create({
  trigger: ".my-element",
  start: "top center",
  end: "bottom+=1000 center",
  pin: true,
  pinSpacing: false,
});

// The one that enables/disables the other ST instance
const st2 = ScrollTrigger.create({
  start: st1.start,
  end: st1.end,
  onUpdate: (self) => {
    if (self.direction > 0) {
      st1.enable();
    } else {
      st1.disable();
    }
  },
});

Hopefully this helps.

Happy Tweening!