IndM Posted July 5, 2023 Share Posted July 5, 2023 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 Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 5, 2023 Share Posted July 5, 2023 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 2 Link to comment Share on other sites More sharing options...
IndM Posted July 5, 2023 Author Share Posted July 5, 2023 @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 ?? Link to comment Share on other sites More sharing options...
mvaneijgen Posted July 5, 2023 Share Posted July 5, 2023 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. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted July 6, 2023 Solution Share Posted July 6, 2023 Are you trying to do something like this?: See the Pen zYMdJJX?editors=0010 by GreenSock (@GreenSock) on CodePen 1 1 Link to comment Share on other sites More sharing options...
IndM Posted July 6, 2023 Author Share Posted July 6, 2023 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, Link to comment Share on other sites More sharing options...
GreenSock Posted July 6, 2023 Share Posted July 6, 2023 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now