Pin Spacer Element Custom Height

[Saqib Syed]

Hi, thanks for an epic animation library.

I'm working on GSAP to create an awesome animated website and haven't faced a big bug so far. Though I had a small query. It's related to pin-spacer element. I know the pin-spcer has height equal to screen height but what if I want to add custom height in px or vh?
Can we add custom height or padding to the pin-spacer element? Moreover, how do we name pin-spacer elements to differentiate their classes like this pin-spacer pin-spacer-page__info, pin-spacer pin-spacer-final-video

See the Pen gOJLbXB by Saqib-Syed (@Saqib-Syed) on CodePen.

Edited May 27, 2024 by Saqib Syed
Added codepen url

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

[Rodrigo]

Hi @Saqib Syed and welcome to the GSAP Forums!

 

Unfortunately that is not how pinSpacing works in ScrollTrigger. The space created to allow the pinning functionality is calculated based on the start and end points you feed to the ScrollTrigger configuration, if you want to have a specific amount of pin spacing, you'll need to set it there.

 

The only alternative I can think of is to create a ScrollTrigger instance that handles only the scrubbed  animation and another that pins the element for a different amount of pixels than the duration of the other ScrollTrigger instance.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

Yeah, I'm very curious about WHY you'd be requesting something like this. What's causing you to try to force the height of the pin-spacer to be something in particular? That seems very odd to me, and I wonder if this is more of an engineering issue on your end or perhaps a misunderstanding of what a pin-spacer is supposed to do. 

 

Also, why would you need to control the "name" of a pin-spacer? You can access the spacer element itself using the ScrollTrigger's "spacer" property. But again, it seems rather odd that you'd need that anyway, so I think it'd help if you could provide a minimal demo that clearly illustrates the problem you're trying to solve (in as simple a way as possible). 

[Saqib Syed]

Actually, I was going through his website https://halo.shakuro.com/ and noticed one of their pin-spacer element had custom height and padding which made me wonder how did they achieve that. That particular pin-spacer element with the class  pin-spacer-page__info is the child of main tag. You can check from inspect element.

 

And I don't want to control pin-spacer elements by their names. I want every pin-spacer element to have a different name for readability purposes.

 

I'm new to GSAP so I might be missing some concepts. It'd be very helpful if you could help me for this query. Thanks!

[mvaneijgen]

You can just set the height using the start and end properties. I don't know what 000 0 200vh would do, but I've modified your demo so that the end is at the bottom of the element + the window height time 2 eg 200vh. Now the pin lasts the height of the element times twice the window height. You can also set it to `top+=${window.innerHeight * 2} top`, so that it is just 200vh. With ScrollTrigger always enable markers, so that you can see what it is doing under the hood and for bonus points set the id of the ScrollTrigger for maxim readability! Hope it helps and happy tweening! 

 

See the Pen qBGqKgg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Saqib Syed]

Thanks a lot @mvaneijgen That worked.