Carousel-like animation in a timeline with ScrollTrigger

[hanjames]

Hi every gsap hero

 

In this case, I want to achieve a carousel-like animation on scroll with couple of card item, so instead of waiting another card item to finish sliding up I want all card items are sliding together with some effect e.g. if the card-item is not on the center it should fade out and scale down.

 

I've tried some couple methods like using position parameter but haven't found the working solution yet, I provide the codepen here with the white rectangle as the card-item carousel center

See the Pen GRzwBbx by ryanfarhan00 (@ryanfarhan00) on CodePen

[mvaneijgen]

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Here is your pen without ScrollTrigger and this is the animation that gets played when the visitor scrolls. My advies tweak this animation before you add ScrollTrigger to the animation. Personally I like to start with he elements that animate at the same position (usually the center) and animate them .from() and .to() somewhere

 

See the Pen ZEwVLvP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

Check out this tutorial. Give you a really great overview how to work with ScrollTrigger. Hope it helps and happy tweening! 

 

 

[hanjames]

On 12/5/2023 at 3:35 PM, mvaneijgen said:

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Here is your pen without ScrollTrigger and this is the animation that gets played when the visitor scrolls. My advies tweak this animation before you add ScrollTrigger to the animation. Personally I like to start with he elements that animate at the same position (usually the center) and animate them .from() and .to() somewhere

 

 

 

 

Check out this tutorial. Give you a really great overview how to work with ScrollTrigger. Hope it helps and happy tweening! 

 

 

 

Hey @mvaneijgen  thanks for the reply, sorry for the late reply.

 

I've been experimenting for couple of times, and this is the closest one I've got.

 

I just need this to be in sync instead of staggered like this.

 

Here's the codepen demo:

See the Pen GRzwBbx?editors=0010 by ryanfarhan00 (@ryanfarhan00) on CodePen

 

[mvaneijgen]

Check this, one timeline with. one tween that moves all elements at the same time (GSAP can animate single elements, but if you feed it an array it will animate them all).

 

Also you don't have to check if the timeline is at progress 1, .restart() always plays from 0! 

 

Hope it helps and happy tweening! 

 

See the Pen ZEwwXaK?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[hanjames]

Thanks @mvaneijgen.

 

Do you mind to check out my latest update on the codepen? what if the scenario is like that where there's a scale that needs to be animated back and forth depends on whether the card is in the center or not?

[mvaneijgen]

Ha, had just forked my pen to see how to add that. Keep in mind: I personally use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

So here is just the first attempt, so hope this gets you in the right direction.

 

See the Pen abXXLaG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[hanjames]

Thanks a lot @mvaneijgen  actually just solved it a couple hours ago, and I have quite the same approach as you here, the only thing now is to refactor it so it can be used for dynamic data, but it's for later work atleast I have done the basic concept here, thanks once again much appreciated your help

 

Here's the latest version:

See the Pen GRzwBbx?editors=0010 by ryanfarhan00 (@ryanfarhan00) on CodePen