hybrid09 Posted December 1, 2020 Share Posted December 1, 2020 Hello everyone, Lets say I have a full page, and I have a panel inside it with margins of 2em each. I have two panels inside that use scroll triggers. I would like the panel to maintain all margins, how do I go about creating that? In the first picture below, the red is the margin I want to maintain with the left and right panels being able to be pinned. The second picture is what I am facing, the margins on top and bottom are not maintained when left and right panels are pinned. See the Pen ZEpGZpv?editors=0110 by mallabiplav (@mallabiplav) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 1, 2020 Share Posted December 1, 2020 Hey hybrid09. How do the images that you provide relate to the demo that you have provided? 1 Link to comment Share on other sites More sharing options...
GreenSock Posted December 1, 2020 Share Posted December 1, 2020 Yeah, I'm a bit confused like Zach - can you provide a demo that illustrates the issue clearly? Perhaps it'd be as easy as just wrapping your element inside another <div> that has padding or something, and pin that wrapper. Or adjust your start value. 3 Link to comment Share on other sites More sharing options...
akapowl Posted December 1, 2020 Share Posted December 1, 2020 1 hour ago, GreenSock said: Perhaps it'd be as easy as just wrapping your element inside another <div> that has padding or something, and pin that wrapper. Or adjust your start value. Yeah, i also think that there just might be a misunderstanding of how margins work in this context. They set-off your element by the amount you put on it - but in the box-model they are outside of your element itself. Since your ScrollTriggers don't have a start defined and thus the start defaults to 'top top', the pin will still start when the top border of your .section3 element hits the top of the window - the margin ( that is outside of that element ) will be scrolled past. Hope this makes sense the way I wrote it up. So the attempt mentioned by @GreenSock sounds like the thing you want to do here. 3 Link to comment Share on other sites More sharing options...
hybrid09 Posted December 2, 2020 Author Share Posted December 2, 2020 Hello @ZachSaucier @GreenSock @akapowl, Thank you all for replying so quickly. I am sorry that the demo was confusing and did not convey what I wanted it to do. I have put a part of my code, it is a bit dense but I hope that is okay. I did as @GreenSock said, the top padding works, but the bottom does not? Am I missing something? See the Pen rNMOYZy by mallabiplav (@mallabiplav) on CodePen Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted December 2, 2020 Solution Share Posted December 2, 2020 Most likely it'd be easier if you only used a single pin for the entire section. Then you showed and hide the content within as necessary using a timeline and attach that timeline to the ScrollTrigger that does the pinning. 3 Link to comment Share on other sites More sharing options...
hybrid09 Posted December 2, 2020 Author Share Posted December 2, 2020 @ZachSaucier This is a much better and simpler way of what I was trying to achieve. Thank you! Cheers! 2 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