Jump to content
Search Community

GSAP image slider

Amanda test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, 

 

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.

 

Thanks!  

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});

Better?

  • Like 1
Link to comment
Share on other sites

  • Solution

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

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