Share Posted April 26, 2015 I'm trying to repeatedly scroll items in a list. I have a container with 3 images all with float: left set on them. When the first element is animated, the second one stays in place, instead of moving. Relevant code here, complete example at: http://jsbin.com/tivupa/2/edit?html,output .slideshow { display: block; width:7300px; position: absolute; top: 200px; left: 0px; } .slideshow img { float:left;margin:0;padding:0; } <container> <div class="slideshow"> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> <img src="https://dl.dropboxusercontent.com/u/6801572/terrain.png" alt="" width="2400" height="305" /> </div> </container> TweenMax.to($(".slideshow img:first"), 10, {x:"-=2400px", ease:Linear.easeNone, onComplete: function(){ $(".slideshow img:first").insertAfter(".slideshow img:last");}}); Any ideas how I can get a continuous scrolling effect? See the Pen edit?html,output by tivupa (@tivupa) on CodePen Link to post Share on other sites
Solution Share Posted April 27, 2015 The way to do this would be to Use Javascript to duplicate the repeated image once and append it to the container (no need to put them in markup) Use CSS to position these images side by side by telling the container not to wrap Tween the x property of the *container* to the width of the single image (this will move both images in lock) Repeat the tween infinitely (-1) Here is a codepen to demonstrate: See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen 2 Link to post Share on other sites
Author Share Posted April 27, 2015 The way to do this would be to Use Javascript to duplicate the repeated image once and append it to the container (no need to put them in markup) Use CSS to position these images side by side by telling the container not to wrap Tween the x property of the *container* to the width of the single image (this will move both images in lock) Repeat the tween infinitely (-1) Here is a codepen to demonstrate: See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen Exactly what I was after, but as usual, just over thinking it. Thanks. 1 Link to post Share on other sites
Share Posted April 27, 2015 Excellent solution, Shaun. Thanks for helping out. 1 Link to post Share on other sites
Author Share Posted April 27, 2015 Hey Shaun, I hope you don't mind I mentioned you in credit for that technique on my tutorial I just wrote on my blog. If there is a better link then your profile link here let me know and I'll add it! I've done a codepen as well to demonstrate the idea I was prototyping: See the Pen NqPYVR by agrothe (@agrothe) on CodePen 1 Link to post Share on other sites
Share Posted April 28, 2015 Thanks drewbit, I appreciate it and don't mind at all! Totally unnecessary, but appreciated nonetheless. The link to my profile is fine; seems the most relevant in this context. Nice tutorial btw! 1 Link to post Share on other sites
Share Posted March 1, 2017 Hello, this post is a bit old by now, but I'm glad I stumbled upon it! I got Shaun's solution to work, but with text instead of images. Essentially, it's an announcement marquee. And the site is in WordPress so the number of announcements – and therefore the length of the scrolling div – is dynamic. I'm wondering if there's a way to control the duration dynamically as well, so it's an even pace no matter how many announcements there are. Thanks for the original solution Shaun! Link to post Share on other sites
Share Posted March 3, 2017 Hi @rideforthebrand To get equal "rate", and because the "distance" of any sentence is determined (its width), that leaves us to calculate "time" for the tween. See the Pen mWEddP by sgorneau (@sgorneau) on CodePen 5 Link to post Share on other sites
Share Posted March 6, 2017 That looks great, thanks so much for your reply! Sometimes I forget to use those everyday math skills we all learned in high school.. 1 Link to post Share on other sites
Share Posted June 20, 2017 Hello Shaun, I am reviewing your codepen for the scrolling text. I see a class="wrapper", but I don't see where it's defined. Could you help me understand this better. I can see the effect wrapper has. Ken Link to post Share on other sites