cubeghost Posted June 15, 2021 Share Posted June 15, 2021 (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 More sharing options...
GreenSock Posted June 15, 2021 Share Posted June 15, 2021 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 More sharing options...
cubeghost Posted June 15, 2021 Author Share Posted June 15, 2021 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 More sharing options...
Solution GreenSock Posted June 15, 2021 Solution Share Posted June 15, 2021 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: 2 Link to comment Share on other sites More sharing options...
cubeghost Posted June 15, 2021 Author Share Posted June 15, 2021 That makes sense and it works great, thank you! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now