Pinning inside of horizontal scrolling

[ivevil]

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

[akapowl]

 

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.

 

 

 

[ivevil]

Thank you so much, this was really helpful, I am playing around now with different solutions to see which one fits the needs of the animations I need the best.