Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kailin

Infinite, draggable slider (with controls) using GSAP v3

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×