Carousel with cards transition

[Black Ducas]

Hi friends, I'm trying to develop a carousel based on this example. I removed the "infinite" feature and I'm trying to create a transition on cards while dragging, that is: while dragging the slider, Card 1 scale down (to the size of other cards) and Card 2 scale up. (When the transition ends I'll get Card 2 title inside and inject in "carousel__card-title" element with another animation). Because of this I think it needs snap in order to determine when a single card transition ends and eventually let control by navigation arrows (next/prev).

I'm struggling to understand how to handle the transition controlled by the dragging. Any helpful ideas? Thanks

 

See the Pen oNjzpor by gooogooo (@gooogooo) on CodePen

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

[ZachSaucier]

Hey Black Ducas. You created a proxy but that proxy is not rendered to the page and you didn't set a trigger for it, so it can never be dragged. I think you mean to set the trigger to ".carousel__draggable" instead of bounds? 

[Black Ducas]

1 hour ago, ZachSaucier said:

Hey Black Ducas. You created a proxy but that proxy is not rendered to the page and you didn't set a trigger for it, so it can never be dragged. I think you mean to set the trigger to ".carousel__draggable" instead of bounds? 

Hi @ZachSaucier

right! It was missing the trigger, my mistake, but my first problem was how to control a transition by dragging.

 

I found this example by @OSUblake that fits better my case.

 

See the Pen YrXdGZ by osublake (@osublake) on CodePen

 

Basing on that I was able to do this:

 

See the Pen JjYbjaM by gooogooo (@gooogooo) on CodePen

 

Not bad, but I'm stuck on some details:

- most important, how can I know when a single transition ends? I need like a callback to start another animation

- I can't disable the infinite loop, is there an option?

- how can I recognize the cards going on the left of the central one? Because while dragging to left I want they animate to opacity:0

- how can I set the first card element (Card 1) as the default central card? While now it's Card 4, without any apparent logic

 

Maybe @OSUblake knows better how to solve these issues, since my code is basing on his example.

 

Thanks

[ZachSaucier]

First off, you're using a really old version of GSAP. We highly recommend using GSAP 3. 

 

16 minutes ago, Black Ducas said:

most important, how can I know when a single transition ends?

Since you're using draggable as your main mechanism, you can use the onThrowComplete callback.

 

16 minutes ago, Black Ducas said:

I can't disable the infinite loop, is there an option?

Using the approach in the demo above, not really. You'll need to modify the timeline that's being progressed through to match the behavior that you want.

 

22 minutes ago, Black Ducas said:

how can I recognize the cards going on the left of the central one? Because while dragging to left I want they animate to opacity:0

Again, modify the timeline being progressed through. That's pretty much all that the approach is that you have in the demo above.

 

22 minutes ago, Black Ducas said:

how can I set the first card element (Card 1) as the default central card? While now it's Card 4, without any apparent logic

Change the starting progress value.

[Black Ducas]

Hi @ZachSaucier , yes I usually use GSAP 3, I'm just using the version of the original example, next I'll port it to v3.

 

Thanks for answers, point 1 solved. Other 3 ones are not immediate to me.

 

In your opinion is there a better/simpler approach to do the same thing?

[ZachSaucier]

2 minutes ago, Black Ducas said:

In your opinion is there a better/simpler approach to do the same thing?

The core of the approach is fine, you just have to rework the animation to do what you want it to do. But if you aren't understanding what's going on that may prove difficult to do  

[Black Ducas]

Hi @ZachSaucier yes I'm trying to understand it, could you give some little help on the overall approach and key points? Basically the initCell function seems the core. Thanks

[ZachSaucier]

I recommend starting from scratch so that you can get a full grasp of what's going on. Simply create the effect that you want in a timeline not attached to the scroll/drag. Start from the left most position at time 0 and go until the right most position at the end time.

 

Once you have that setup, it's simple to hook it up to the scroll/drag position.

[vamsi_k]

Hello,
I am trying create something like 

See the Pen JjYbjaM by gooogooo (@gooogooo) on CodePen

, but unable figure out logic. Can someone point me to a similar codepen using latest version of gsap

Thanks

[akapowl]

 

Here you go:

 

 

You can throw the url of any codepen into the search (top right) and it will show you all the posts that codepen was used in.

 

[vamsi_k]

Oh nice. thanks @akapowl