benoit Posted March 4, 2022 Share Posted March 4, 2022 Hi, I don't understand how to pin two elements or if this is possible with scrollTriger. In my codepen I would like to pin ".main" and remove the white space. See the Pen GROzdNv by benoitwimart (@benoitwimart) on CodePen Link to comment Share on other sites More sharing options...
benoit Posted March 4, 2022 Author Share Posted March 4, 2022 My best test : See the Pen zYPeMBa by benoitwimart (@benoitwimart) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted March 4, 2022 Share Posted March 4, 2022 Hello Benoit, it would be easiest to just wrap your content in a div and pin that wrapper instead, like this - so sort of or pretty much like you did in that second codepen example of yours. See the Pen xxPMmWZ by akapowl (@akapowl) on CodePen I wrapped all your content there, but technically you would only need to wrap everything that could be visible at any point when pinning, of course. Beware though: for any subsequent ScrollTriggers within that same wrapper (and thus the same pin-spacer when pinning like this) you will have to set the pinnedContainer property to have their starts/ends where you'd expect them to be. I hope that helps. Happy scrolling! 3 Link to comment Share on other sites More sharing options...
benoit Posted March 5, 2022 Author Share Posted March 5, 2022 Thank You @akapowl ! 1 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