Search the Community

Hi I would like to create a section where I can scroll through cards (flexible heights, all larger than 100svh), which then stick to the bottom. I was able to build this already. But what I also would like to achieve is that the next sections should already be visible at the bottom, like stacked papers. See the sketch attached. Here is where I got stuck: https://codepen.io/Mirko-the-typescripter/pen/YPyMJvp

how I can animate my cards like ios notification on lockscreen, attached example scroll I need to make exactly the same card scroll animation position, transparency, movement, all this should be as similar as possible to the example

Hi there, I am trying to do a rotating and perspective card on click. The cards are rotating, however as you can see from the demo, when the card is higher than the 1st one, the first one disappears. I can see its obviously due to the perspective being set at -40px 40px on the function, however anyone have any ideas how i can resolve this to make sure that card 1 is included? Thankyou in advance!

Hello, I am building a website with vue 3 and i want a section to have this marquee effect (products scrolls infinitely + responsive). But i am having trouble to build it. can you help me? Thank you so much! vue verison https://codepen.io/berkegvn/pen/bGOENjy i want something like this one, stops when hover and drag to move both sides. https://codepen.io/animaticss/pen/ZEqdMmr HTML SCSS version

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.