ScrollTrigger header animation leaves unwanted white space

[rebekahans]

I have created an animation where elements transition in a header div at the very top of a web page as soon as the user starts scrolling. The container is pinned until all elements have finished transitioning, however there is a lot of white space under the header div that decreases as you scroll. I understand this is there because of end: "+=250" - if I change this to 0 the white space is gone but the animation happens far too quickly.

 

Please see a stripped back version in the codepen (view full screen to get the full effect of the white space). How can I keep the header pinned until the elements have finished animating, but  have the rest of the website content in view and fixed in place as normal?

See the Pen dyZBeXw by rans9388 (@rans9388) on CodePen

[mvaneijgen]

The spacing is created if you "pin" an element. If you don't want this to happen you can set `pinSpacing: false`, but this will pin the header until you proceed the scroll position and thus text will be underneath the header  

See the Pen OJOeZYb by mvaneijgen (@mvaneijgen) on CodePen

 

I don't know what you are going for, but I would either not pin the header or have the header 100% of the browsers height. You can also try to only pin the text.

[rebekahans]

Yes, pinSpacing: false makes the text go under the header div, which is not right for me because then the user will not be able to see it. 

 

The header on my website features a video and the height is 600px, 100% of the browsers height would be too big for what I am trying to do.

 

I want the text to fade out and in and only once this is finished the user can scroll the rest of the web page. Maybe this could be achieved without 'pin' but I am not sure.

[GreenSock]

Or just wrap the whole thing in a <div> and pin that instead: 

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

 

Is that what you wanted? 

[OSUblake]

Hi rebekahans,

 

This sounds like this question. To get rid of the space you would need to put everything inside a container and pin that.

 

 

[rebekahans]

So simple and completely solves my issue - thanks so much!