Search the Community
Showing results for tags 'card flip'.
Found 2 results
-
First post here! I've read documentation, searched the forums and noodled around quite a bit before posting and I'm still stuck! So here's what I'm trying to accomplish. I'm sure it's super easy solution and I'm probably missing a minor step. I have a section of cards that are stacked and they're overlaying each other. When you click it the card div it pops up, if there is already an active card the previous one shuffles back into the stack and the new one pulls up. Here's my code that I have so far. It only shuffles them up and down without previous going back into the stack. const GetCards = document.querySelectorAll(".tools-card"); GetCards.forEach(function(cardList, index){ const cardTL = gsap.timeline({paused: true}).to( cardList, {duration: 0.5, x: "-=10", y: "+=250", scale: 1.05, ease: "expo.inOut"}) let activeCard = false; cardList.addEventListener('click', () => { if(activeCard === false){ cardTL.play(); activeCard = true; }else{ cardTL.reverse() activeCard = false; } }) }) I've tried several things like adding tags to the timeline and several methods() but I clearly don't know what I'm doing! Some guidance would be stellar. Thanks in advance.
-
Hey everyone, I'm working on a card flip animation that appears to be just fine in all browsers except IE11. For some reason, the flip animation doesn't appear to have any perspective the way it does in other browsers. Ultimately, the card flip should appear 3D (instead of "flat" like it does in IE11). I can't really figure out what I'm doing wrong here. Everything appears to be in order, I'm thinking I might just have a browser specific bug on my hands. Any help or advice would be appreciated, thanks!
