Search the Community

Hey, I am creating this cards effect in gsap for nextjs https://codepen.io/Arsh-Ergon/pen/rNbXaZw, this is the same code I am using for my nextjs project but the problem is its going downwards in a reverse manner, but in the pen its working fine, this is my code: const cardRefs = useRef([]); gsap.registerPlugin(ScrollTrigger); gsap.registerPlugin(useGSAP); useGSAP(() => { const cards = gsap.utils.toArray(".Card"); let lastCardST = ScrollTrigger.create({ trigger: cards[cards.length-1], start: "center center" }); let stickDistance = 0; cards.forEach((card, index) => { var scale = 1 - (cards.length - index) * 0.025; let scaleDown = gsap.to(card, {scale: scale, 'transform-origin': '"100% '+ (lastCardST.start + stickDistance) +'"' }); const tween = gsap.to(card, { scrollTrigger: { trigger: card, scrub: true, markers: true, invalidateOnRefresh: true, start: "center center", end: () => lastCardST.start + stickDistance, pin: true, markers: true, pinSpacing: false, ease: "easeInOut", animation: scaleDown, toggleActions: "restart none none reverse" }, ease: "easeInOut", scale: () => 1 - (cards.length - index) * 0.025 }); ScrollTrigger.create({ trigger: card, start: "top top", pin: true, pinSpacing: false, markers: true, id: 'pin', end: 'max', invalidateOnRefresh: true, end: "bottom center" }); }); }, []); html: return ( <section> <div id="cards-wrapper" className="Cards flex overflow-hidden flex-col flex-nowrap flex-none justify-start content-center items-center w-full pt-[100px] pb-[30px] border-[1px] border-[solid] border-[green] relative"> <div id="card" className="Card bg-teal-500 relative mb-[10px] rounded-xl w-[90vh] h-[300px] top-0 overflow-visible origin-[50%_-160%]">Something</div> <div id="card" className="Card bg-yellow-500 relative mb-[10px] rounded-xl w-[90vh] h-[300px] top-0 overflow-visible origin-[50%_-160%]">Hello</div> <div id="card" className="Card bg-blue-500 relative mb-[10px] rounded-xl w-[90vh] h-[300px] top-0 overflow-visible origin-[50%_-160%]">Something</div> <div id="card" className="Card bg-[#7fff00] relative mb-[10px] rounded-xl w-[90vh] h-[300px] top-0 overflow-visible origin-[50%_-160%]">Something</div> <div id="card" className="Card bg-[#bbfb3c] relative mb-[10px] rounded-xl w-[90vh] h-[300px] top-0 overflow-visible origin-[50%_-160%]">Something</div> </div> </section> ) I try to change the reverse in the toggleActions but still its not working. I have seen different questions try to replicate them its working well in the codepen but on nextjs its again start to behave different. I want it to be like this: https://stickycards.framer.website/ issue video: https://imgur.com/a/F8zeZd9

[UPDATE] I finally found a solution that almost suits me (thanks to the video below). Now I'm looking for the best way to change the text color when the red background passes behind it. I've updated the CodePen. Hello, I am looking to create the following effect: Automatically (without hover), I would like to give the impression that a red background moves from card to card from right to left, then from left to right. If possible, I would like there to be a masking effect as if the background were sliding under the gap between the cards. Has anyone already implemented a similar effect? Any CodePen? Thank you in advance.

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.