Jump to content
Search Community

Pinning inside of horizontal scrolling

ivevil test
Moderator Tag

Recommended Posts

Hello,

I have a question regarding the pinning inside of the horizontal scroll. I read somewhere that it is a big mistake to have nested pins - and I tried it but I saw that it is really a bad idea to have it - they are not working as expected.


What I want to achieve?
I want like on the codepen attached to have pinned section where box is moving, so basically to stop horizontal scrolling and on scroll to move the box rather than to trigger it when it comes to the viewport.

In short: I want to have horizontal scroll of ie 5 sections and when the viewport hits the third section to stop horizontal scrolling between the sections, to do the animation on scroll and then after finishing animation on scroll to continue horizontal scrolling. 

I saw examples like this for vertical scroll but I haven't seen them for horizontal scroll. Is that anyhow possible to achieve?

Thanks,

See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

 

Hello there!

 

The very last section of that pen (and also the docs ) list/s some caveats of fake-horizontal scrolling, which this is, because you are not actually scrolling, but merely faking a horizontal scroll by animating the content to the left.

 

Quote

Pinning and snapping won't work on ScrollTriggers with a containerAnimation.

 

One approach of what you could do instead is to fake the pinning behaviour by counter-animating the content of whichever section you'd want to 'pin' into the other direction, so to the right. Then you'll need to make sure, that that section is wide enough to begin with.

 

I'm 'fake-pinning' the content of the second slide in the fake-horizontal section here for 2 times the window's width, which is why I set it up to not only be the 100vw wide that it should be visibly, but added the extra-width it needs to for the pinning to its width.

 

.horizontal-inner .slide.two {
  flex: 0 0 calc(100vw + 200vw);
  width: calc(100vw + 200vw);
}

 

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

 

 

 

Other approaches can be found in these following threads.

 

Depending on how exactly your setup looks, one might be more helpful and/or easy to implement than the other.

 

 

 

  • 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.
×
×
  • Create New...