Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cubeghost

ScrollTrigger: Incorrect pinSpacing/sizing when trigger is very tall, multiple pins

Go to solution Solved by GreenSock,

Recommended Posts

(recommend viewing the codepen in a separate tab)

 

So I have a situation where I need to pin multiple elements from the same trigger. They're all sibling elements, but I can't pin the entire container because it contains iframes that will reload (unacceptable since they're ads) when the container is wrapped with the pin-spacer. 

 

When I have a short trigger element, this works totally fine (probably because nothing actually needs to be pinned). However, when I have a longer trigger element, the pin spacing creates extra space between the pin elements. If I turn pinSpacing off, the pinned content overflows the container (which I think makes sense). 

 

Have tried working around this and manually setting the pinSpacing a few different ways and I'm coming up short. Any ideas? 

See the Pen QWpzyZy by cubeghost (@cubeghost) on CodePen

Link to comment
Share on other sites

I'm having a difficult time understanding your question. Can you elaborate a bit? 

 

It seems to me like you're creating a logical impossibility. You want to pin things, but you don't want to have pinSpacing AND you want them to stay within the bounds of its container? So imagine a 200px-tall <div> that's inside a 500px container. If you pin that for 400px with no pinSpacing, how could that possibly work? The 200px <div> would end up 400px further down which goes beyond the container's bounds. See what I mean? 

 

Sorry, I may be misunderstanding what you're asking. 

Link to comment
Share on other sites

Hi Jack, sorry I wasn't more clear. I'd like to use pinSpacing, but when I do, it adds too much space to each pinned element. 

Link to comment
Share on other sites

  • Solution
6 hours ago, cubeghost said:

Hi Jack, sorry I wasn't more clear. I'd like to use pinSpacing, but when I do, it adds too much space to each pinned element. 

How about just applying the pinSpacing to the last one only?: 

pinSpacing: index === pinnables.length - 1,

Also beware of margin collapsing. See this post for more details: 

 

  • Like 2
Link to comment
Share on other sites

That makes sense and it works great, thank you!

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×