scrollTriger and pin

[benoit 55 Likes (Contributor)]

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

[benoit 55 Likes (Contributor)]

My best test :

See the Pen zYPeMBa by benoitwimart (@benoitwimart) on CodePen

[akapowl 5,495 Likes (Superhero)]

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!

[benoit 55 Likes (Contributor)]

Thank You @akapowl !