Jump to content


scrollTriger and pin

Moderator Tag

Recommended Posts


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

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!

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.