Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
drewbit

continuous repeating scroll

Recommended Posts

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 comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Excellent solution, Shaun.

Thanks for helping out.

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

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 comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 3 months later...

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