GSAP CAROUSEL

[Hemanta 3 Likes (Newbie)]

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

[Visual-Q 979 Likes (Leader)]

Back in the day Chrysto had a solution I've adapted for things like this. If you search the forum you may also find more contemporary answers.

 

 

There's even a tutorial explaining it:

 

http://bassta.bg/2013/05/simple-fade-infade-out-slideshow-with-tweenlite/

[PointC 14,428 Likes (Superhero)]

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.

 

[mikel 4,775 Likes (Superhero)]

 

Just another carousel ...

 

See the Pen OJNbPwK?editors=0010 by mikeK (@mikeK) on CodePen

 

 

[OSUblake 18,495 Likes (Superhero)]

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);
}

 

[PointC 14,428 Likes (Superhero)]

[Hemanta 3 Likes (Newbie)]

@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

[ZachSaucier 7,152 Likes (Superhero)]

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);

[PointC 14,428 Likes (Superhero)]

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.

 

[Hemanta 3 Likes (Newbie)]

Thanks @ZachSaucier & @PointC. Clear now.

[Arman_ 0 Likes (Newbie)]

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

Thanks!

[Rodrigo 5,421 Likes (Superhero)]

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:

https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin

 

Hopefully this helps.

Happy Tweening!