Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Problem with Pin

Go to solution Solved by akapowl,

Recommended Posts

It is necessary to make that at scrolling of the page at one moment the animation of emergence of the image was started, and at another moment the image was fixed and changed during scrolling.
The problem is that when I scroll through the image gallery to the end, the block following the gallery overlaps the gallery.

See the Pen BawaWZN by Oleksandr07 (@Oleksandr07) on CodePen

Link to comment
Share on other sites

  • Solution

Welcome to the forums @Oleksandr07


Try adding a height/min-height to your .list, because if you don't, your .list will have a height of 0 and ScrollTrigger's pin-spacing will add up the scroll-duration to that, so you will 'end up short', the way you have things set up. Here is your example with a min-height of 50vh on the .list. Hope that helps.


See the Pen d53128e743726ed435fce5d937fb4900 by akapowl (@akapowl) on CodePen


Edit: ...just to give some idea for how to possibly handle things:

If you e.g. set the min-height to calc(300px + 10vh) matching a) the height of the images you use + b) 10vh with resemblance to the 10% distance to the top where your pinning begins, the scrolling will continue nicely when the whitespace above and below the image would be the same.


See the Pen c3ff56019123a6ad3dfd234801e0be3b by akapowl (@akapowl) on CodePen


  • Like 4
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.