Horizontal slideshow, to instantly switch between slides at certain scroll positions

[Boba]

How can I make it so, as user scrolls, it snaps on every "slide", so user can scroll only one by one panel, without skipping some if he scrolls harder? Thanks

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[Boba]

I am implementing one of the examples from the Scroll trigger documentation

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

 

In the example above, if user scrolls fast enough, he can get to the last panel in just one scroll. What I want to achieve is, not matter how fast user scrolls, the scroll always snaps on the next panels, so user does not skip any of the panels.

 

Thanks

[mvaneijgen]

Hi @Boba welcome to the forum!

 

Then you're looking for the  Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ below an example from the docs it behaves like you're describing 

 

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

 

Personally I find that demo hard to understand, so here the same logic but with a timeline and labels, which allow you to manually define to which point each scroll should go with which interaction of the user

 

And here an example that mixes normal scroll with the Observer plugin

 

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

 

Hope it helps and happy tweening! 

[Boba]

@mvaneijgen Exactly! Was not aware of this plugin, this is what I need. How do I make this example so it scrolls with horizontal snapping?

 

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

[mvaneijgen]

As with everything to do with GSAP, build an animation. When wanting to create a scrolling effect you frist have to remove the scrolling part and just focus on the animation you want to happen. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

A while back I've written a guide how to create a card stacking effect, but the logic you're looking for can also be build with it. Below a demo that has a horizontal animation, it is probably not 100% what you're looking for, but if you give it a go I think you'll be able to get it to do what you want with the resources provided. If you still need help please provide a minimal demo showing what you've tried your self and someone here will be happy to point you in the right direction. Happy tweening!

 

 

See the Pen poYzaJW by mvaneijgen (@mvaneijgen) on CodePen

[Boba]

@mvaneijgen thank you so much! I almost have it at the spot I need it to be, here is the example.

The only issue I am having is, once I get to to the last slide, and go back to the first one, scroll stops working

See the Pen yLrvVqN by Slobodan-Djordjevic-the-looper (@Slobodan-Djordjevic-the-looper) on CodePen

[mvaneijgen]

Sorry for the late response. It seems to work perfect here, I've add some empty space and it seems to do exactly what you want. Am I missing something? 

 

See the Pen zYXWRar?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen