Search the Community
Showing results for tags 'css-grid'.
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): https://codepen.io/rhernando/pen/vjGxH https://codepen.io/chrisgannon/pen/JtljL
This question is in reference to a previous question I've asked here on the forum. I wanted to achieve the similar transition effect as shown in SCABAL and thanks to the suggestion of @Carl , I was able to achieve the same effect with help from TimelineMax. However, I believe the method I used isn't very responsive friendly. Becuase in order to achieve the similar effect as shown in scabal.com, I tried doing it with TimelineMax(here) and used relative and absolute positioning which completely messed up my mobile responsiveness. To counter this, I have used CSS grid and made a layout which is responsive(here) but I am not able to achieve the same effect using TimelineMax(with CSS Grid) and I can't / don't want to use relative and absolute position in this case. I believe, if I use from( ) and bring the panels to the default state, I will have the effect I am looking for. TLDR: How can I achieve the same effect(as shown in Scabal when you scroll down) only by using from( ) and set( ) method? I've tried but I couldn't get it right. Thank you so much for your time. Help is really appreciated. This is bugging me for quite some time now.