Jump to content


Help - custom carousel bug

Recommended Posts

I've created a custom carousel that works perfectly going forward, and perfectly going backward UNLESS you click the left arrow fast (before the slider has fully rotated). Then, the order remains correct, however it looks like the image is coming from the right rather than the left. There is nothing in my previousPolaroid() function that tells the carousel to move something from the right to the left, and I am at a loss. Any help would be appreciated!

Edit: I've changed the first tween in previousPolaroid() from TweenMax.to to TweenMax.fromTo and this solves the issue of images coming from the right, however it's still a bit jumpy so if anyone has any pointers for that that would be great!

See the Pen Ygrzrv by ccogswell (@ccogswell) on CodePen

Link to comment
Share on other sites

I see a few things that may help.


It looks like you're setting a new current slide on the click event, so when you click rapidly, the animation is resetting to the new current slide. To help this, you may want to set the current slide index via `onComplete`.


There's also a jump on your next slide animations; they are less noticeable just due to how the 'left' property works. To further eliminate these 'jumps' in both directions you'll want to set the fromTo values based on the slide's current (when arrow is clicked) position.


Also, from a performance standpoint, consider use 'x' (transform) over 'left', this will allow for smoother animations. This article does a great job explaining the why: https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108


Hope this helps.


  • Like 3
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.