Jump to content
Search Community

Whitespace above pinned div (ScrollTrigger)

matusbossak test

By matusbossak
in GSAP

Moderator Tag
 Share
Go to solution Solved by GreenSock,

Recommended Posts

matusbossak test

matusbossak

Posted
Posted

Hello there,

 

I'm wondering if it's possible to keep an element pinned during animation without the need to add extra white spaces. I'm specifically looking at this above the ".section:has(.square)" (while doing animation) and, if pinSpacing is enabled, below it too.

 

Appreciate your help!

 

Edit:

The goal is to stack (pin) the user on top of the element before the animation starts and unstack (unpin) the user after it finishes, without any additional whitespace.

 

Matus

See the Pen YzBvOOw by matusbossak (@matusbossak) on CodePen

Link to comment
Share on other sites
matusbossak test

matusbossak

Posted
  • Author
Posted
2 minutes ago, GreenSock said:

Sure, you can just pin the container: 

 

See the Pen

See the Pen mdvKGNW?editors=0010 by GreenSock (@GreenSock) on CodePen

by GreenSock (@GreenSock) on CodePen

 

 

Is that what you're looking for? 

Thanks a lot Jack.

 

I actually tried this, that I wrapped everything into container (which has position fixed while animation is running), but this wasn't suitable for me, because I'm trying to run GSAP animation on child element. The child element is child of parent element. Parent element has siblings which I'd like to be visible (without any movement = this means no whitespace creation) while doing the animation (the parent element is < 100vh => siblings are visible). The only suitable solution I can come up with is to wrap parent element and it's siblings into container, but since the parent element and it's siblings are children of document.body, that means I should pin document.body? This doesn't seems right to me. Or would that work all right?

 

Thanks.

Link to comment
Share on other sites
matusbossak test

matusbossak

Posted
  • Author
Posted
1 minute ago, GreenSock said:

Yep, I'd probably just create a container that's a descendant of <body> and use that. You probably could use <body> itself, but it feels a little weird to me. That's why I'd just do one level lower, wrapping everything in a <div> that you pin. 

Thanks, Jack. Have a nice day 🙂.

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...