Add Effects to Carousel

[thomas-12345 1 Likes (Newbie)]

I have started with the card carousel

See the Pen rNZvKNJ by thomas-hibbard (@thomas-hibbard) on CodePen

, and altered it use a class so I can more easily drop it into a Vue app. However I am really struggling with a few things:

1. I want there to be two separate levels of scale reduction. One foreground scale=1 card, surrounded by two at smaller scale and then a third tier at a smaller one yet, farthest from the center.

2. I want, as an element disappears off the stage at the right, to appear on left stage and vice versa

 

For the first idea, I have tried setting the scale in the initCell method with 

 

let scale: number = 0.6;
  if ([0, 6].includes(index)) {
    scale = 0.3;
  }

which sort of  has the right idea, but really just falls apart because only the cells that are set to 0.3 initially go back to that size as the animation progresses. 

 

The second idea, I'm really at a loss for. I did an implementation of this design where each forward/backward tick was its own timeline with a repeat of "1", and doing the animation like I was able to clone cells onto the DOM that had correct innerText for what would be rotated onto the visible stage with the next previous or next button click. This doesn't work at all with the animation I've used as a starting point for this attempt. 

 

I would be grateful for any help here. Thank you.

 

See the Pen JjavMdy by thomas-hibbard (@thomas-hibbard) on CodePen

[Rodrigo 5,377 Likes (Superhero)]

Hi,

 

I think the logic in this example should provide you a good starting point based on what you want to achieve:

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

 

You might want to remove the ScrollTrigger part from it and focus just on the Draggable related stuff.

 

Hopefully this is enough to get you started.

Happy Tweening!

[thomas-12345 1 Likes (Newbie)]

@Rodrigo This is a really great example, thank you so much. It will me a while to unpack what exactly is happening here. One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why. There's just a lot going on here and I'm struggling to figure that out. 

[Rodrigo 5,377 Likes (Superhero)]

Hi,

 

2 minutes ago, thomas-12345 said:

One concern I have with it though is that when I reduce the number of <li> down to 5, the animation breaks, and I cannot figure out why.

Most likely it has to do with the fact that at all times you have 5 elements in view, plus the extra elements that are not visible. So I'd assume that if there are no extra elements there will be no animation. If you want to show 5 elements at a time and you only have 5 then just set the initial styles and create a different type of animation.

 

As you mention this is not the simplest thing to create and follow and, as I mentioned in another thread, we don't have the time resources to break down the logic of complex examples for our users, sorry.

 

My suggestion would be to start with something simple and add complexity to it progressively. If you run into a GSAP related question, don't hesitate to ask!

Happy Tweening!