Jump to content
GreenSock

Leolo

two ScrollTriggers - snap & pin Problem

Recommended Posts

I try to get some vertically scrollable sections that snap softly animated with ScrollTrigger 1. One section (3rd in this example) thereby serves as a ".container" for some panels (red and green in this example) which are scrolled horizontally (ScrollTrigger 2) when the container is entirely in the display.
784805609_Bildschirmfoto2022-08-30um13_55_37.thumb.png.f9120c8949764413b4a9c882f578b34a.png

The following sections below should then be scrollable with the snap in the same way as the first sections. Important to say, that I don't want the snap to continue for the horizontal scrolled panels in the container-section. Best would be a solution for content of variable total length inside the container-section. I tried a lot of the similar examples that I found here, but I wasn't able to make them work with the snap-effect and non-snapping panels at the same time. Probably a common mistake. Thank you very much for helping!

 

See the Pen vYRwPZv by leolos (@leolos) on CodePen

Link to comment
Share on other sites

It is indeed a tricky thing, but you can use a custom snapping function to run your logic. Here's how you could have it snap to each panel in both vertical and horizontal directions: 

See the Pen eYrOObw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you want NO snapping at all during the horizontal one, you could add custom logic to sense when it's between that ScrollTriggers's start/end, and then if so you'd just return the value that was passed into the snapping function (unaltered). 

 

Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

12 hours ago, GreenSock said:

It is indeed a tricky thing, but you can use a custom snapping function to run your logic. Here's how you could have it snap to each panel in both

If you want NO snapping at all during the horizontal one, you could add custom logic to sense when it's between that ScrollTriggers's start/end, and then if so you'd just return the value that was passed into the snapping function (unaltered).

Does that clear things up? 


Thank you very much for your help!
I will now need some time to think about and implement the tips because I have relatively little experience with js and gsap. Only after my post I read that nesting the ScrollTriggers is not a good idea anyway. Ouch. Thanks for helping anyway. As a quick fix, your variant with snap for all sections also helps me a lot.

  • Like 1
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.
×