Hey there master-tweeners,
So for an online portfolio I'm creating I wanted to add a container with ''things I'm good at''. I wanted to make it out of 9 flipcards with an image or logo on the front, and a small text on the back. Onclick they're supposed to flip around and stay that way untill clicked again. Now so far I've come across two methods to achieve this, but both come with some complications.
The first method
On first glance it looks like it does exactly what I want. The animation is smooth and steady. The problem though is when you click on the (first) card twice in a row, the second animation starts halfway through the first animation disaligning the starting position. (Bad explanation, try it yourself in the codepen lol)
The second method
This is much less Tweening which is nice because I have to do it for nine cards, but there's something I want, but cant get with this method. I really like the way the cards bounce with the bounce ease when they flip. Since this method uses a reverse, the bounce reverses too which looks weird, obviously.
Just get to the point already
I guess my questions are the following,
- Is there a way to fix the problem in the first method?
- Is there a way to fix the problem in the second method?
- Most importantly, what method do you guys recommend?
- What's the most efficient way to get this to work on nine cards, without copy-pasting the whole thing nine times?
Thanks in advance ?
Codepens used in the process (the one on the bottom is mine):