Jump to content


GSAP image slider

Recommended Posts



I'm working on a gsap image slider to specifically meet my needs. I've got it all working as hoped/expected EXCEPT for one thing. 

The following (line 73)

    TweenMax.to(slider, 0.25, {x: -tweenD + '%'});

is intended to tween the slider to the relevant slide after clicking the related nav button. Unfortunately it works the first time you click a nav button, but on no subsequent clicks. What is working, is the changing of the 'current' class, which is within the same click function, so it has added to my confusion.



See the Pen 92d3c5e34f6d5c0e4faaad98bc85f9bf?editors=0011 by ald603 (@ald603) on CodePen

Link to comment
Share on other sites

For tweening percentage-based transforms, you should use xPercent. GSAP allows you to stack a percentage-based translation on top of a regular px-based one which can come in very handy in many situations. 


So your code would look like: 

TweenMax.to(slider, 0.25, {xPercent: -tweenD});


  • Like 1
Link to comment
Share on other sites

One thing I would offer is, rather than looping through the navigation <li>s and assigning a click action to each independently, I would put a generic class on each (`nav-opt` in my example) along with an index data-attribute to quickly get its "place" and navigate with the same logic you used.


I forked your pen and added a bit where you are constructing the navigation to add the generic class and the data-attribute, and modified your click event handler at the end.


See the Pen ZeBKKW?editors=0110 by sgorneau (@sgorneau) on CodePen

  • Like 5
Link to comment
Share on other sites

THANK YOU SO MUCH!! This is what was needed. I couldn't quite see it. 

  • Like 1
Link to comment
Share on other sites

Great solution, Shaun.

Really nice to have you helping out so much!

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