Jump to content


how to create a seamless loop?

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

Hi Guys,


referring to the sample code below:

    var list = $('.class');
    TweenLite.to(list, 10, {css:{marginLeft:"500px"}});


As I executed the code above, the entire lists move to left and when the last element reaches 500px, it goes below the list elements until theyre all stacked up vertically.


Is there a way I can stacked them up horizontally so to create a seamless loop?


thanks for the help in advance.



Link to comment
Share on other sites

Those elements probably have css styles "float:left" and position:relative or auto, one way to achive this is to set "whitespace:nowrap" on those elements. That will probably solve this issue for you.

If not you'll have to position:absolute them and manually set the top and left coordinates.


I hope it helps.

Link to comment
Share on other sites

Thanks for your suggestion Michael.


After trial and error and checking out somewhat similar thread, I found Carl's suggestion and it does help the looping.


So going back to my main question...how do I make it a seamless loop - that is - there's no gap between the list elements as they repeat.




In my demo link above, I want it to look like they are chained together forming an endless and seamless chain loop of list items.


Any other ideas how i can make it work?

Link to comment
Share on other sites

If I understand what you want to achieve you might want to use




ease:Linear.easeNone, onRepeat:function(){ obj.css({'left':-500}); }


and apply the css rule overflow:hidden on the container

Link to comment
Share on other sites

thanks for the overflow hidden trick Michael, the unwanted scrollbar now dissapears.

However, onRepeat functions doesnt seem to cut it (or maybe I just inserted it in the wrong place).


Currently, there are 5 lists animating and only after all the lists reaches 500px and are out of the frame, only then it started to repeat (leaving an empty slots) and thats not what I wanted.


What I want to achieve is that when the last child of the list item (first to move) reaches 500px, it will be immediately shown next and before the first child list item thereby creating the effect of continous chain of images that is looping.

Link to comment
Share on other sites

In that case it might be better to animate each image (or container individually) and then when it passes 500px limit it returns at position (item.width * -1) thus slightly before the start of the container

Link to comment
Share on other sites

Thanks for your help once again, Michael.


I really appreaciate it.


I thought theres a built-in features that I need to know so can use for this project.


Anyway...I hope that just like the 'yoyo' feature, gsap can come up with same feature I desire sometime in the near future.




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.