Jump to content
Search Community

Horizontal scroll & pinning & scrub

Oleh Koval test
Moderator Tag

Recommended Posts

Hello Oleh,

 

you'll want to have a look at containerAnimation for triggering/controlling things inside fake-horizontal scroll-scenarios as such.

 

 

 

 

This here is what the ScrollTrigger documantation says:

 

containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a 

See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen

 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

 

  • Like 2
Link to comment
Share on other sites

Coming to think of it again and after some fiddeling, I think containerAnimation might not be the right thing for your scenario.

 

Pinning of sections as usual is generally not possible in fake-horizontal scenarios like these, since you are only animating things to the side and not actually scrolling them.

 

But since you only want to 'pin' that last section of yours there, what you can do instead to sort of make it appear like pinning, is create one ScrollTrigger that is only responsible for the pinning of the whole section and another one that is responsible for the fake-horizontal animation part.

 

The duration (start to end) for the pinning ScrollTrigger should be longer than the fake-horizontal-scrolling ScrollTrigger's duration for the amount of duration of the third ScrollTrigger you are creating (the one for the clip-path animation). Make that third ScrollTrigger's start the same point, where the fake-horizontal-scrolling ScrollTrigger's end is and you land on something like this, which if I understood correctly should be what you were going for.

 

[ And if I am not mistaken, since the fake-horizontal-scrolling animation will already be finished at the point where you want to trigger the clip-path animation, that is why using the containerAnimation actually won't work for a case like this. ]

 

Hope that will help!

 

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

 

 

  • Like 2
Link to comment
Share on other sites

12 minutes ago, Oleh Koval said:

If you take the block out of the horizontal scroll, then everything works. Not in horizontal scrolling. Is it possible to do this or not?

 

As the codepen demo in my second reply shows, it should be possible - only speaking with regard to the animation on that last section in the fake-horizontal-scenario there though - I'm not sure if it would be that easy for the others on the way there, since it looks like there are some things being pinned - and as mentioned that is not possible in this scenario.

 

What you could do instead for those is instead of pin them, maybe animate them in the contrary direction, so they'd appear pinned.

 

Then again I'm not sure if you'll actually really want to use ScrollTrigger for this or maybe set it up as a sort of slider that reacts to different touch/mouse events instead of reacting to actual scroll - like this example does e.g.

 

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

 

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

 

I don't have the time to dig into that, but I think Cassie's suggestion from the thread linked below might be suitable for something like you intend to do. In the demo below I added a tween to the timeline of that example to sort of show the concept you could approach. You might also want to get a closer look on how durations and the position parameter work with tweens on scrubbing ScrollTriggers.

 

 

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

 

 

 

Edit:

Here is a version with some slight changes, so the last horizontal panel doesn't move off screen to the left at the end.

 

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

  • Like 2
Link to comment
Share on other sites

  • 5 months later...

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...