Jump to content
Search Community

Scrolltrigger horizontal and vertical sections with snap

Vander test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 5 months later...
  • 4 months later...

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. 

Link to comment
Share on other sites

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!

  • Thanks 1
Link to comment
Share on other sites

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.

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