Jump to content
Search Community


Hemanta test
Moderator Tag

Recommended Posts

Hey Greensockers,


I am not able to achieve the desired effect with my carousel. Need help.



After slide-04 slides out of the view from the box container, I want slide-01 to slide in from the left, and then slide-02 and so on. And the whole animation should run seamlessly forever.





See the Pen zYqKgmP by sundaray (@sundaray) on CodePen

Link to comment
Share on other sites

39 minutes ago, PointC said:

I'd probably take a slightly different approach.


Fancy week - reusing delayedCall.


var timer = gsap.delayedCall(2, slideIt);

function slideIt() {
  gsap.to(targets[count], { xPercent: 100 });
  count = count < targets.length - 1 ? ++count : 0;
  gsap.fromTo(targets[count], { xPercent: -100 }, { xPercent: 0 });


  • Like 2
Link to comment
Share on other sites



Hi Craig. Your solution works great.  Thanks a ton.


I have one more question. I am not able to understand the following line of code. 

gsap.to({}, { duration: 2.5, onComplete: slideIt });

My question is: Why is there an empty object as the first argument? What purpose does it solve?



Link to comment
Share on other sites

16 minutes ago, ZachSaucier said:

It's the same thing as gsap.delayedCall(slideIt, 2.5);

Exactly. I just put that in there to show options. A lot of people probably don't realize you can use an empty tween as a timer. But, as Zach mentioned, it accomplishes the same thing. That's also the point Blake was making above. You can use the initial delayed call over and over by simply restarting it in the slideIt() function. Then you wouldn't need an empty tween or another delayed call to create your desired pause.


Bottom line: there are a whole bunch of options available to you. Happy tweening. :)


  • Like 3
Link to comment
Share on other sites

  • 2 years later...
On 8/20/2020 at 10:03 PM, PointC said:


Hi, @PointC I am building one carousel with a different animation, I am trying to understand your codepen, can I get a little explanation on what exactly these lines are doing and how it is looping the slides.

gsap.set(targets, { xPercent: -100 });
gsap.set(targets[0], { xPercent: 0 });

See the Pen a18bfadb3e315a0d18d4e34d264aa25e by PointC (@PointC) on CodePen


Link to comment
Share on other sites

Hi @Arman_,


In GSAP xPercent and yPercent are the equivalent of using percentage values in transform translate. GSAP actually uses matrix calculations to get things done but that's beyond the scope of your question. Basically in the case of a DOM node they move the element it's entire width (xPercent) or height (yPercent) on the given axis.


Craig's code basically moves all the elements in the array to the left their full width. Since all the slides have the width of the container they're no longer visible, because of the container's overflow. The He takes the first element and moves it to it's natural position.


You can play around removing the overflow from the container and see where the elements are.


Also take a look at the docs for the CSS Plugin in order to find out more about this:



Hopefully this helps.

Happy Tweening!

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