[Loop forward/backward carousel]

This seems to work as expected not sure it's the correct approach

 

See the Pen JjEVKbJ by nicolas-zhiti (@nicolas-zhiti) on CodePen

[Loop forward/backward carousel]

5 hours ago, OSUblake said:

For one, you're using relative values like "-=200" and "+=200". That's just going to add/subtract to whatever the x value is at that moment in time.

 

For example, if x is 135 when you click prev, then it's going to animate x to 335, and not 400 like you're expecting.

 

Another thing is that this calculation doesn't work like you might expect when x is negative.

parseFloat(x) % containerWidth

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder

 

 

Or you can use the wrap util.

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

 

 

Wrap util is definitely something I should work around to achieve this on my own.

Thank you

[Loop forward/backward carousel]

20 hours ago, OSUblake said:

 

Just post the url.

Thank you

 

This codepen should do the trick, based on @Jack script.

 

See the Pen GRrLKgr by nicolas-zhiti (@nicolas-zhiti) on CodePen

[Loop forward/backward carousel]

Using the toIndex() lead me to an unwanted behavior.

 

In this code pen if you click on the 5th magnet then on the 9th and finaly on the first you go back to first magnet on the left instead of the one on the right.

 

I don't know how to insert code pen again 😃

[Loop forward/backward carousel]

It helps more than you think ! 😁

 

Thank you for that, is it up to date with gsap best practices ?

 

Still, if someone can explain to me what I did wrong would be highly appreciated.

I'm still gonna train this script you learn better when you practice

 

Thank you @Jack

[Loop forward/backward carousel]

Hello GSAP community,

 

First of all I'd like to thank the developper and the community for the amazing work around GSAP, i've discover it few month ago and I can't imagine work without it now !

 

Let's get back to business !

 

I'm developping a carousel and i'm facing multiples issues :

 - I can't control the width of the magnet container, that means depending on the number of magnets, some magnets might be not fully visible and when you use the modifier to get back to position 0 it may override a magnet

- In my case the function prev works but not the next one (I've inverse the rotation of the carousel in purpose)

 

Any clues how to fix that ?

 

Have a good day 

See the Pen QWdxzvj by nicolas-zhiti (@nicolas-zhiti) on CodePen