Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Black Ducas

Carousel with cards transition

Recommended Posts

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

Link to post
Share on other sites

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? 

Link to post
Share on other sites
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

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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?

Link to post
Share on other sites
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 :) 

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

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.

×