Jump to content


Infinite horizontal scroll (infinite loop)

Moderator Tag
Go to solution Solved by Rodrigo,

Recommended Posts



i've been trying to create a infinite looping image scroller without success. I've been trying to recreate THIS: 

See the Pen WNQmvPK by kdbkapsere (@kdbkapsere) on CodePen

 from the docs. 


Can you tell me what I am doing wrong?

See the Pen QWrrpyX by iii999 (@iii999) on CodePen

Link to comment
Share on other sites

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I rework this demo to work in a different way?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  


You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 


Tip: by default ScrollTrigger uses the main page as its "scroller", but it looks like you're using a <div> as the scroller, so you'll need to tell your ScrollTrigger to watch that one. Like scroller: "#div_block-782-33". And your CodePen doesn't even load GSAP or ScrollTrigger. It looks like you're writing a lot of code manually that you could simplify with loops and just structuring your markup differently (you don't need an id for everything). And like in that original demo, you'll need to dynamically create and add new elements to the DOM (your demo doesn't look like it's doing that at all). 


Good luck!

Link to comment
Share on other sites

  • Solution



There are a few issues with your code. The example you're trying to emulate is adding just one element at a time, you are adding all the elements and also you are cloning them, which could create a problem with selectors, especially IDs. Also you are using the update method which is intended for a different situation. You should run the refresh method to recalculate the ScrollTrigger instance's start and end positions. Also in the case that you could have more ScrollTrigger instances in your site, just call the refresh method for that specific instance, especially if adding new elements doesn't affect the start and end points of other ScrollTriggers.

See the Pen wvjjrKK by GreenSock (@GreenSock) on CodePen


Happy Tweening!

  • Like 1
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.