Jump to content
GreenSock

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

GSAP CAROUSEL

Recommended Posts

Hey Greensockers,

 

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

 

WHAT I WANT?

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.

 

Thanks,

Hemanta

 

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

Share this post


Link to post
Share on other sites

I'd probably take a slightly different approach.

 

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

 

If that doesn't work for you, there are a lot of carousel threads around the forum.

 

Happy tweening.

:)

 

  • Like 5

Share this post


Link to post
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 });
  timer.restart(true);
}

 

  • Like 2

Share this post


Link to post
Share on other sites

giphy.gif

  • Haha 3

Share this post


Link to post
Share on other sites

@PointC

 

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?

 

Hemanta

Share this post


Link to post
Share on other sites
8 hours ago, Hemanta said:

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

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

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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.

×