Scrolltrigger horizontal and vertical sections with snap

[Vander 0 Likes (Newbie)]

Hi y'all!

 

I've been trying for a few days to get my sections working horizontally and vertically () with snap to the next or prev section(depending if you're scrolling down or up), but i'm not able to get it

 

My logic tells me that it is not possible at all to have the first scrolled animation (the blue/white/orange svg) and then snap the sections but i'm not an expert and I tried everything😓 I only make it work in one direction, not both (

See the Pen JjOeZPL?editors=0010 by EricCV (@EricCV) on CodePen

)

 

Another option could be to do it in this way (

See the Pen dyZQKKE by EricCV (@EricCV) on CodePen

) but snapping the slides

 

Any idea to try something? I'm stuck and I need some push

I've created three different codepens to show the options I've tried to achieve it... Any help would be appreciated...

Also any feedback to improve my gsap code would be perfect

 

Many thanks 

 

 

See the Pen wvPQXKB?editors=0010 by EricCV (@EricCV) on CodePen

[OSUblake 18,472 Likes (Superhero)]

Hi Vander, 

 

Have you checked out the ScrollTrigger demos page? There's lots of examples of snapping in there, like for a horizontal section.

 

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

 

For something more involved like your last one, use timeline labels (see using position parameter), and then use snap: "labelsDirectional".  If you need more granular control, you can use an array of function. Be sure to check out the snapping options in the ScrollTrigger docs.

[purple-lightsaber 7 Likes (Newbie)]

@OSUblake thanks for the codepen Blake! How would you speed up the snap so that it's not so slow. I've tried changing the duration and ease with no luck.

 

Best,

Andres

[GreenSock 18,231 Likes (Superhero)]

Just use the object syntax for snap and set a duration in there: 

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

[purple-lightsaber 7 Likes (Newbie)]

@Greensock thanks for the answer it works great. I'm curious if there is also a way to have the scrollTrigger trigger as soon as the mousewheel is scrolled instead of having it trigger when the mousewheel stops.

 

Thank you!

[Cassie 5,071 Likes (Superhero)]

Sounds like you're actually looking for mouse/wheel/touch events instead of ScrollTrigger.

Take a look at the demo on the Observer docs page

https://greensock.com/docs/v3/Plugins/Observer

[purple-lightsaber 7 Likes (Newbie)]

Thanks for pointing me in the right direction @Cassie !

[Kokku 5 Likes (Newbie)]

Hi,

 

Posting here as my issue is somewhat related.

 

Basically what I want to do is to snap to any specified elements inside the fake horizontal scrolling container.

 

Here's a demo: 

See the Pen VwBpdGE by matias_autio (@matias_autio) on CodePen

 

So in this demo, I would want to snap to all the .decades. And there can be a random number of .items between them.

 

Only thing I can think of is to calculate their relevant positions as percentages compared to the overall width of my ScrollTrigger but it seems rather complex and I was wondering if there is an easier way to do it. 

[Rodrigo 5,039 Likes (Superhero)]

Hi,

 

Using the labels directional could be one option. Here is a live example:

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

 

Basically loop through the elements with the distance the container will move and create the timeline so it's duration is 1 second, which is super simple since it has only one instance in it. Then just add a label on the specific time which we get by dividing the offset left of the element by the total distance. Round to 0 and 1 for the first and last element.

 

It might not be perfect but is the simplest solution I can think of. You could explore other avenues but those will definitely be more complicated than this.

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[Kokku 5 Likes (Newbie)]

Thanks so much @Rodrigo! Exactly what I wanted to do. 😊  But now I thought of one more thing which would make it even better. Is it possible to have something like the native scroll-snap-type: proximity ? So that it would only snap when the scroller is closer to the element. I found a promising CodePen 

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

so I'm going to try it myself.