maxvia Posted December 21, 2020 Share Posted December 21, 2020 Hi Guys, How would you deal with images of different width to make it infinite ? THanks! See the Pen JjRywdM by skima37 (@skima37) on CodePen Link to comment Share on other sites More sharing options...
maxvia Posted December 22, 2020 Author Share Posted December 22, 2020 As you can see above the way I have implemented is, each element should be wrapped into a different wrap(). Meaning, the element that is the most on the right needs to travel more towards the left in order to complete the window. FOr some reason this is not working and each element are travelling the same width... I am really confused on how I could do that. Also it seems to be very ineffective. Couldnt find anything on the forum that is similar. Any help is appreciated. Thank you Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted December 22, 2020 Solution Share Posted December 22, 2020 I answered a very similar question yesterday. Modifying what I said there to fit your use case: Quote it's probably easiest to position each [image] at the same position at the start. Then offset each's start position by the amount it needs to be offset. Then you should create an animation for each [image] that animates that section horizontally for the distance of all of your [image] widths. Then you use GSAP's modifiers to wrap the horizontal position. 2 Link to comment Share on other sites More sharing options...
maxvia Posted December 23, 2020 Author Share Posted December 23, 2020 Thank you @ZachSaucier ! 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