ScollTrigger pinning creates whitespace

[s4ty]

Hello, I have the problem that if I reduce the size of an element, a white space is created underneath. I'm not sure what is the best approach to solving this. I tried to adjust the end point, but then it no longer scrolls the correct distance. In the end, the container has the right height for the start values, but not when the content is reduced by the animations. Do you understand what i mean?

Can you help me to reduce the space under the text without changing the scrolling behavior?

 

 

See the Pen abmWKMB by bennet-reimers (@bennet-reimers) on CodePen

[ZachSaucier]

Hey s4ty and welcome to the GreenSock forums.

 

Sorry, I don't really understand what white space you're talking about. There are two sources of white space below your pinned element:

1. White space caused by your animation of the height to 30%. 
2. White space caused by the pinning. This is necessary in order to prevent later content from going under the pinned content while it's pinned.

Perhaps it would be helpful if you showed us your end goal. That way we can instruct you how to get there.

[s4ty]

The result should look like the first image/text transition here: https://www.marc-o-polo.com/de-de/inspiration/women-spring-summer-20.html#women-spring-summer-20-opener
Please open the link on mobile devices or a browser with a maximum width of ~400px.

 

As you can see the next image comes right behind the first image/text transition no white spaces caused by animation or pinning.

 

In my example above there is a lot of space before the second gray container ist reached.

[ZachSaucier]

You could do that in two ways:

1. Pin a container of all of the content. Then use an animation/timeline to animate the pieces within as you need them to be animated including their positions.
2. Use an approach similar to this demo (that's listed in our ScrollTrigger demos). 

It's best to avoid animating less performant properties like width, height, etc.