continuous rotating slides on click

[mjwlist]

Hi, I'm looking for some advice on a rotating cards animation. 

 

I have three cards next to each other, the center one enlarged. I need animate either the the left or right card to the center on click animating the others in a rotating fashion. I have the essence of the animation more or less agreeable but I'm looking for advice on how to make the animation persist on every click of the left or right card.

 

The included pen should make it fairly obvious what I'm attempting to achieve. This is my first attempt with Greensock  so any advice would be gratefully received.

 

Many thanks

 

Mark

See the Pen rrxjre by mjwlist (@mjwlist) on CodePen

[mjwlist]

So now several hours later I'm still banging my head on the desk!

 

I have forked and adjusted the above pen.  My thinking is if I can change the class or preferably the id of the card variables in an onComplete  function if I keep clicking card 3 (in this example) the cards should rotate every time. My issue is getting the animation to fire on subsequent clicks after the first. I have tried invalidate() and restart() but just can't find a way to work it. 

See the Pen KBVqYw by mjwlist (@mjwlist) on CodePen

 Again any thoughts would be greatly appreciated.

 

Thanks

 

Mark

[PointC]

Hi @mjwlist 

 

Welcome to the forum. 

 

If you'll be animating things around a flex container you may want to take a look at this thread:

 

That being said, you can make it work with xPercent. With only three cards I think just reassigning the card position via their index and then animating would be an easy solution. Maybe something like this:

 

See the Pen KBVvMz by PointC (@PointC) on CodePen

 

I'd also note that you shouldn't mix CSS transitions with GSAP animations as that can result in a fight for control of the element and produce undesirable results. Hopefully that helps. Happy tweening and welcome aboard.

 

 

[mjwlist]

Hi @PointC,

 

Thanks so much for basically doing it for me. I can't say I expected that! Massive relief though....:o)

 

I'll certainly be taking a look a the recommended thread. Also looking at your pen I see I was quite far away from a decent solution and really approaching the task in the wrong way. Right now I need to work that into a project quickly but I'll be back to ask a couple of questions if I'm not sure how or why you've done something. Hope that's ok...

 

I expect I'll be asking a fair few questions around here as a new job will be requiring me to get to grips with GASP pretty quick as animating UI's seems to be a bit of a thing.... looks like it's going to be interesting though.

 

Many thanks again

 

Regards

 

Mark