maxvia Posted December 30, 2020 Share Posted December 30, 2020 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 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 30, 2020 Share Posted December 30, 2020 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! 1 Link to comment Share on other sites More sharing options...
maxvia Posted December 31, 2020 Author Share Posted December 31, 2020 (edited) 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 December 31, 2020 by maxvia Fixed the moving part Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted December 31, 2020 Solution Share Posted December 31, 2020 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. 3 Link to comment Share on other sites More sharing options...
maxvia Posted December 31, 2020 Author Share Posted December 31, 2020 Thanks a lots @ZachSaucier. probably explains why I missed that 🙈 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now