Infinite carousel that speeds up and changes direction on scroll

[bon3s]

Hello everyone :) This is my first post, and a first experience with GSAP. It's been an interesting ride so far. I am working on a carousel that autoplays infinitely and speeds up on scroll . An additional feature would be that the direction changes too, but I need to sort out the basics first. I have rummaged trough every single post and thread I could find, and even though I did find stuff that pointed me in the right direction, none of the examples was exactly what I'm trying to do. 

I have created a minimal demo, my divs are relative, flex positioned inside a container, and the thing works, I'm just having an issue with a flash at a random point of scrolling that I can't resolve. Can anyone help with this , or at least point to what I am doing wrong ? Thank you 

See the Pen rNMXMzp by skippyisthaman (@skippyisthaman) on CodePen

[elegantseagulls]

Hi @bon3s, and welcome!

 

Check out this thread to get an idea of how to achieve the velocity x modifiers for a looping carousel. I've not had a chance to dive-in/think trough reversing directions, but I imagine you could multiply by '-1' depending on scroll direction(?).

 

[bon3s]

Thank you , I have already tried the version from the mentioned thread, but failed. I'm working with React, and using Refs to target each of the carousel items, but, I can't get it to work with this example. 

[ZachSaucier]

So is your issue seen in the demo that you posted or are you saying that you're just having an issue implementing that demo in React?

 

If you're having issues with the approach itself (i.e. not the React implementation) perhaps it'd help to look through these relevant threads:

 

If you're saying that you need help with the React implementation specifically, please create a minimal demo of the React version and explain where you're getting stuck.

 

Happy tweening!