continuous repeating scroll

[drewbit 15 Likes (Newbie)]

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

[Shaun Gorneau 1,836 Likes (Superhero)]

The way to do this would be to

1. Use Javascript to duplicate the repeated image once and append it to the container (no need to put them in markup)
2. Use CSS to position these images side by side by telling the container not to wrap
3. Tween the x property of the *container* to the width of the single image (this will move both images in lock)
4. Repeat the tween infinitely (-1)

Here is a codepen to demonstrate: 

See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen

[drewbit 15 Likes (Newbie)]

The way to do this would be to

1. Use Javascript to duplicate the repeated image once and append it to the container (no need to put them in markup)
2. Use CSS to position these images side by side by telling the container not to wrap
3. Tween the x property of the *container* to the width of the single image (this will move both images in lock)
4. 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.

[Carl 9,715 Likes (Superhero)]

Excellent solution, Shaun.

Thanks for helping out.

[drewbit 15 Likes (Newbie)]

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

[Shaun Gorneau 1,836 Likes (Superhero)]

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!

[rideforthebrand 1 Likes (Newbie)]

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!

[Shaun Gorneau 1,836 Likes (Superhero)]

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

[rideforthebrand 1 Likes (Newbie)]

That looks great, thanks so much for your reply! Sometimes I forget to use those everyday math skills we all learned in high school..

[Art_Maverick 0 Likes (Newbie)]

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