Jump to content
Search Community

Infinite, draggable slider (with controls) using GSAP v3

kailin test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 3 months later...

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?

Link to comment
Share on other sites

  • 4 weeks later...
  • 3 weeks later...

@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)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

@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.

 

Link to comment
Share on other sites

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:

 

Link to comment
Share on other sites

  • 5 months later...

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?

Link to comment
Share on other sites

  • 1 month later...
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

Link to comment
Share on other sites

  • 2 years later...

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. 

Link to comment
Share on other sites

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. 

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...