Infinite, draggable slider (with controls) using GSAP v3

[kailin]

Hi!

 

Original slider code that I've based this off of: 

See the Pen veyxyQ?editors=0010 by osublake (@osublake) on CodePen.

The original code (above) is everything I need for a slider, but I wanted to use v3 of GSAP (no particular reason, just want to).

I've tried changing the above to use v3 without all my personal modifications, but once I change var transform = proxy._gsTransformto use var transform = gsap.getProperty(proxy) and transform.x to transform("x"), the same issue as below happens. The slide colors have to be changed as well since this method of randomizing colors doesn't work with v3.

 

 

The bug in my code (see codepen below)

- Dragging and button press (next) gets stuck on the original start point.

- Going left works well.

- Going left, then right works well. But it gets stuck once you hit the original start point.

- Going right / next will cause you to be stuck for a while, as the progress and x values are still increasing. At that point, the animation will be stuck until you press / drag previous enough times to reach the start point again.

 

 

Thank you for any assistance

See the Pen MWYqxXR?editors=0011 by jen_ (@jen_) on CodePen.

[ZachSaucier]

Hey kailin and welcome to the GreenSock forums.

 

Good work converting most of it to GSAP 3! The biggest issue is that .progress() can't be negative in GSAP 3. So you should use GSAP's .wrap() utility method to keep it in the range of 0 and 1. I went ahead and straight converted the pen you used as a reference to GSAP 3 because I thought it'd be simpler for me to debug:

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

 

Just applying that fix to your demo makes it function well:

function updateProgress() {
  animation.progress(gsap.utils.wrap(0, 1, transform() / entireSize));    
}

Keep in mind that InertiaPlugin requires at least a Shockingly Green Club GreenSock membership. We'd love to have you join the club!

[kailin]

Ohhh my god thank you so much. Progress requiring a positive value is such an obvious answer!

[Prodesigner]

Hello, how to create the same exact effect in gsap 3 with snap like in first post.

Like this => 

See the Pen veyxyQ by osublake (@osublake) on CodePen.

 

Best.

[ZachSaucier]

Hey Prodesigner and welcome to the GreenSock forums.

 

2 hours ago, Prodesigner said:

Hello, how to create the same exact effect in gsap 3 with snap like in first post.

I show how to do the same effect using GSAP 3 in my previous post in this thread... Am I missing something?

[Prodesigner]

Hello Zach,

Well in first post, we have "snap to" slide, in Your pen is something like free swipe

[Bjarke Rasmussen]

Hi @ZachSaucier,
Would it be possible to know the index of the active slide on this one? I'm trying to implement with pagination.
All the best, Bjarke

[ZachSaucier]

Hey @Bjarke Rasmussen and welcome to the GreenSock forums! It's definitely able to be calculated. But I might suggest just using a slider that has that already like this one:

 

[jfudman]

@ZachSaucier , I think @Prodesigner was pointing out that your pen that you posted on Jan 17, 2020 does not snap on drag.

On 6/1/2020 at 4:21 PM, Prodesigner said:

Well in first post, we have "snap to" slide, in Your pen is something like free swipe

 

In your pen just change the line of code:

x: x => gsap.utils.snap(Math.round(x / slideWidth) * slideWidth)

to something like this

x: x => gsap.utils.snap(slideWidth, Math.round(x / slideWidth) * slideWidth)

 

[GreenSock]

10 minutes ago, jfudman said:

In your pen just change the line of code:

x: x => gsap.utils.snap(Math.round(x / slideWidth) * slideWidth)

to something like this

x: x => gsap.utils.snap(slideWidth, Math.round(x / slideWidth) * slideWidth)

 

Actually, you can simply do this: 

x: gsap.utils.snap(slideWidth)

 

[Prodesigner]

It works  Thank You!

[lucaslink]

How would one go about animating the content inside the slide? 

 

Brand new to GSAP. Attempting to animate the text inside the sliders. I've created this pen, based on the original V3 slider posted by @ZachSaucier

See the Pen MWyBxeJ by lucaslink (@lucaslink) on CodePen.

 

I've attempted adding animation both inside and outside of the other animaton with limited success.

Also, stagger isn't working in my function.

 

Loving GSAP so far. I'm a designer with some experience with HTML & CSS, very little in JS. Even so, this has been easier to use so far than any of the GUI programs I've tried to achieve roughly the same thing. Plus, this will be easy wayyy easier to implement on our site.

[ZachSaucier]

Hey @lucaslink and welcome to the GreenSock forums.

 

I'm guessing you want to play an animation when the slides fully comes into view? If so, you should use the onComplete callback of the slideAnimation tween within the animateSlides function. Just slapping a tween to the end of the script will make the animation happen immediately once the JS runs which isn't what you want. 

 

You can get the the active slide's content by doing:

var index = indexWrap(-x / slideWidth);
var slideContent = slides[index].querySelectorAll('.slide-info > *');

Then do something like the following inside of the slideAnimation vars object:

onStart: () => gsap.set(slideContent, { y: 30, opacity: 0 }),
onComplete: () => gsap.to(slideContent, { y: 0, opacity: 1, stagger: 0.2 })

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

[lucaslink]

@ZachSaucier this has to be the quickest forum response i've ever received. thank you thank you thank you.

 

This has been extremely helpful. 

 

How would I take it a step further and animate the background of the .slide-info selector seperately from the text? I'd like the triangular background to slide in, and then have the text animate, after the image has loaded in.

 

I've attempted to add additional variables, and add them to gsap.set({}) but kept getting weird syntax errors I couldn't debug on my own.

 

[ZachSaucier]

29 minutes ago, lucaslink said:

How would I take it a step further and animate the background of the .slide-info selector seperately from the text? I'd like the triangular background to slide in, and then have the text animate, after the image has loaded in.

Change it from being a regular tween to a timeline with tweens and then create a new tween for the background. I think you'd learn a lot from the GSAP Getting Started article:

 

[lucaslink]

@ZachSaucier Thanks again! I promise I already read that and watched the video before even starting with GSAP.  Some concepts are a difficult for me to grasp, and obviously this pen, at least to me, seems way above what is covered in the getting started article. Looks like I have lots more learning to do.

[popland]

is it possible to reuse the code for multiple sliders in the same page? which is the most convenient and savy way to do it?

for the moment i duplicated the timer, the proxy, the animation and the draggable, keeping the rest of functions intact

 

any suggestion on how to optimize?

[ZachSaucier]

50 minutes ago, popland said:

any suggestion on how to optimize?

The same suggestions as trying to make any code more resuable. Two main keys:

• Pass in references to the variables you need instead of just using global ones.
• Use the same calculations for multiple sections/elements if you can.

[popland]

Thank you @ZachSaucier

just transformed it in a standalone function getting most parameters it needs paramters like:

slider(target='.target'....)

[rockingorko]

Hey @ all,

is it some how possible to just let the slider run one and set up a dragable bar underneath it?? I have tried to change the repeat value to false but i did not work. Thanks for your help

 

[GreenSock]

15 hours ago, rockingorko said:

Hey @ all,

is it some how possible to just let the slider run one and set up a dragable bar underneath it?? I have tried to change the repeat value to false but i did not work. Thanks for your help

Would you mind providing a minimal demo so we can see exactly what you're trying to do (in context)? There are several different CodePens in this thread, and a lot of comments, so I'm having a hard time sifting through it all and understanding exactly what you want. You'll always have a much better chance of getting an answer if you provide a minimal demo. 

[superbenj]

what is your suggestion for a slider with content, with different height sizes for the responsive?

 

See the Pen WNaVPrp by superbenj (@superbenj) on CodePen.

 

[GreenSock]

Hi @superbenj. I don't understand your question, sorry. Is this somehow related to GSAP? Are you saying you want the taller content to be scrollable or something? It's probably best to create a new thread rather than hijacking a 2-year old thread  We'd love to help with anything that's directly related to GSAP. 

[superbenj]

Sure I can create a new thread, but what I try to achieve  is the height to be set by the tallest slider instead of

main {
height:100vh;
}

[GreenSock]

Ah, I see. Yeah, that's totally a CSS question, not GSAP. Sorry, I don't have time to figure out all the necessary CSS changes for you but hopefully someone else can. These forums are generally for GSAP-specific questions, though, so that may not happen.