Jump to content


Infinite carousel that moves faster on scroll

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi guys, 


I has been some times I am trying to figure out how I should proceed with an infinite carousel  with images of different widths.


Here is my code pen 


On codepen the images are not moving but it is working fine on my computer. I am guessing that the code I juste added is not optimised enough (specially the first animation)... 


The weird part that I dont get is that my offset initiated through scrolling doesnt work however when i console.log() into the modifiers of my first function I can see it recorded but the images dont move more rapidly.


Any idea how I could optimise this code and why offset doesnt work?


Thank you!



See the Pen JjRywdM by skima37 (@skima37) on CodePen

  • Like 1
Link to comment
Share on other sites

Hey maxvia. The reason. why none of your images move is because your animation tween animates the elements to a position of -= 0 and is never changed/recreated. Please recreate the issue that you're facing if you'd like debugging help.


Happy tweening!

  • Like 1
Link to comment
Share on other sites

The images are now moving fine and the infinite loops works.

What still does not work is the offset not being taken into account even though when I console.log it i can see when I enter the scrolling area that my offset value changes but the images are not moving faster. 


Any idea what is happening? 


Thank you





@ZachSaucier I dont think so. 


 imgArrConst.map((img,i) => {
            let imgWidth = img.getBoundingClientRect().width
            //initial left position depending on previous photos
            let leftPosition = imagesPosition
            //positioning the images before moving them
            gsap.set(img, {left: (leftPosition)  } )
            imagesPosition += imgWidth
            //calculating total imgs width
            totalW += imgWidth
            //create hash of width per index
            imgWidths[i] = totalW

This fonction above allows me to calculate the totalW of all images combined.

I console.log(totalW) and it seemed to give me the appropriate value.

Edited by maxvia
Fixed the moving part
Link to comment
Share on other sites

  • Solution
7 hours ago, maxvia said:

Any idea what is happening?

If you console.log() the actual value that you're passing in you can see that your calculation isn't taking the offset into account. Perhaps you want this instead?

mod(parseFloat(x) + offset)

I think it'd help you if you used better code formatting because you'd be able to more easily catch errors like that.

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