Jump to content
Search Community

continuous repeating scroll

drewbit test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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

  • 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

  • 3 months later...
  • 4 years later...
On 3/3/2017 at 4:03 PM, Shaun Gorneau said:

Has anyone written this in JSX for React. Im having some trouble translating these jQuery methods.

 

 

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.

 

 

 

 

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.
×
×
  • Create New...