Jump to content
Search Community

Scrolltrigger and margins?

hybrid09 test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

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. 

 

image.thumb.png.28320fc50b102a986aa0e2774a688a60.png

 

 

image.thumb.png.4f2f97458c4cdc164b6a8c1ee5391957.png

See the Pen ZEpGZpv?editors=0110 by mallabiplav (@mallabiplav) on CodePen

Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

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

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.
×
×
  • Create New...