Pinned height spacing while keeping content under it

[IndM]

I'm clueless again how to fix this;
What I want to achieve is when the scrolltrigger starts, the section needs to stay on the same position (without the extra white spaces) and the content above and under still visible. So its a sort of screenfreeze while the video is playing.  The video will play depending how much height it has. That's been fixed but here comes the challenging part for me.

The content above and under it needs to be still in frame.
I've tried with given the section an overflow hidden but won't work. Pinning the content above and under that section is also not an option.

See the Pen KKrvyVV by indy-meermans (@indy-meermans) on CodePen

[mvaneijgen]

The best thing to do is to wrap everything you want to pin in an element and use that as the pinned element. See below I've wrapped all your sections in a .trigger element and used that as the trigger in ScrollTrigger. Hope it helps and happy tweening! 

 

Edit: if you have some calculations on the trigger element you can also set the pin to an element eg instead of pin: true, pin: ".trigger", which will accomplish the same goal. 

 

See the Pen OJajOYM?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[IndM]

@mvaneijgen That might be the solution for using one section with such a video but what if there is for example section; video-section; section; video-section (There can be more sections like that)?

I've just tried in your codepen with duplicating that section and pasted it under the red one and it broke everything 😄🙃

[mvaneijgen]

Than you have to choose. Pin the bottom of top section with the video or pin the bottom section with the video

.trigger {

video-section;

bottom-section;

}

 

.trigger {

video-section;

bottom-section;

}

 

Or create some extra spacing that is at the end of the top section which has the same color 

 

top-section

.trigger {

extra-spacing-section;

video-section;

bottom-section;

}

 

.trigger {

extra-spacing-section;

video-section;

bottom-section;

}

 

That are just some ideas I can come up with but feel free to start experimenting, that is what Codepen is great for! Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

[GreenSock]

Are you trying to do something like this?: 

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

[IndM]

Thank you Jack @GreenSock!! That seems to do the job.

I'm not having it in your codepen or else but in my project the pinned container height isn't correct. The height is indeed the total of all the sections inside that wrapper but it doesn't add the extra +=600% from that video trigger on that pinned wrapper. It does add it to that video.

Any clue what this could be?

 

 

EDIT: I had to add pinSpacing: true,

[GreenSock]

9 hours ago, oasis said:

EDIT: I had to add pinSpacing: true,

Nice job figuring it out. Let us know if you need anything else.