Infinite Scrolling, Draggable, Clickable, Speeding Ramped Carousel/Slider - Am I going down completely the wrong path?

[willdoforabigmac]

Hi there,

I'm new to GSAP and new to development in general, I'm coming from Webflow as a designer.

 

Anyhow, I've been trying to make - as the title states - a carousel/slider with all the features I want for UX purposes. I intend on reusing this code on future projects.
I the features I set out to achieve are:

• Smooth motion
• Draggable for mobile mainly
• Clickable for desktop mainly
• Infinite scrolling

I have made something that works the way I want using the Infinite Scrolling helper function from the GSAP Docs page and added my own alterations, but I am not sure if this is how it is supposed to be done, since I started with an existing function I might have accidentally "doubled down" on the wrong solution, I would love some pointers to the right direction.

 

I've attached a demo here so everyone can see what I'm trying to get at, it's quite a specific thing I'm looking for so it's really hard to find good information.

 

P.S. I'm very new to coding in general, I absolutely am not expecting a full-on tutorial or anything but even some pointers to like "hey learn this one first" would be appreciated, I'm also not at the stage to fully commit to pure code and will be utilizing a lot of Webflow in the foreseeable future hope this add all the necessary context.

Thank you everyone in advance.

See the Pen VYvJmvO by willdoforabigmac (@willdoforabigmac) on CodePen.

[mvaneijgen]

Hi @willdoforabigmac welcome to the forum! 

 

Seems good to me, if it works it works! The seamless loop helper function is great! I also use it often and have year of experience with GSAP and wouldn't want to build it my self! It is just robust and well thought out. 

 

If you want to get serious with GSAP I would just start with our getting started guidehttps://gsap.com/resources/get-started/ and open up a Codepen and take it from there. Just start building some simple things that you might want to use and take it from there. Then when you get stuck open up the docs or the forum to see if you can figure out what you're missing and when you get stuck just post back here with what you've tried and someone here will surely point you in the right direction. 

 

Hope it helps and happy tweening! 

 

 

[Rodrigo]

Hi,

 

The helper function can be set up to respond to drag or not (will use Draggable and the Inertia Plugins for that), all you have to do is check if the user is on a phone/tablet or not:

let loop;

if (isPhone) {
  loop = horizontalLoop(elements, {
    repeat:  -1,
    paused: true,
    draggable: true,
  });
} else {
  loop = horizontalLoop(elements, {
    repeat:  -1,
    paused: true,
  });
}

In desktop you can use the next and previous methods the loop instance exposes to go to the next or previous element:

https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop#usage

 

As @mvaneijgen the Horizontal Loop helper function is powerful enough to cover what you're looking for, so play around with it and start simple, don´t try to solve everything in one sitting. Create the simplest possible prototype of what you're trying to achieve and take it from there. If you have any questions along the process, be sure to post here in the forums and remember to include a minimal demo.

 

Happy Tweening!

[willdoforabigmac]

@mvaneijgen @Rodrigo Thanks guys, I've thrown myself down the rabbit hole with GSAP/js animating in general, it's been awesome, the documentation was very helpful. I've just been a bit too cautious and spending so much time worrying that I was going to end up writing something so atrocious it was gonna crash as soon as it goes live haha 😅. Will be adopting a more "if it works it works" mentality. Thanks for the time to help out a newbie!