Search the Community

I want to make an animation like below, the first card will placed on top, and then on snap, I have to move the first card a little bit up and hide the same for the second card, it is like a card stack with animation. anyone can help me? I am using gsap snap to archive mm.add("(min-width: 992px)", () => { gsap.to(".title-section", { y: -60, duration: 3, // opacity: 1, scrollTrigger: { trigger: ".title-section", markers:true, // pin: ".card", start: "top center", toggleActions: "play pause resume reverse restart reset complete none", end: "top 20%", }, }); const cards = gsap.utils.toArray(".about-card-sec"); const header = document.querySelector(".title-section"); const animation = gsap.timeline(); const images = gsap.utils.toArray(".image"); let cardHeight; console.log(1 / (cards.length - 1)) gsap.set(".image:not(:first-child)", { opacity: 0 }); console.log(`min-width: 800`); const imageAnimation = gsap.to( ".image:not(:first-child)", { opacity: 1, scale: 1, duration: 0.1, stagger: 0.1, }, 1 ); function initCards() { animation.clear(); cardHeight = cards[0].offsetHeight; cards.forEach((card, index) => { if (index === 0) { // increment y value of each card by cardHeight gsap.set(card, { y: 0, backgroundColor: "#FDFAFF", opacity: 1, duration: 1, // display:'none', }); // animate each card back to 0 (for stacking) animation.to( card, { y: -40 * cards.length, duration: 0.3, // zIndex: index + 1, opacity: 0, }, 0 ); } if(index==1){ console.log(card,index) gsap.set(card, { y: cardHeight, backgroundColor: "transparent", opacity: 0, duration: 0.3, markers: true }); // animate each card back to 0 (for stacking) animation.to( card, { y: -40 * card.length, duration: 0.3, // zIndex: index + 1, opacity: 1, }, 0 ); } if(index==2){ gsap.set(card, { y: index==1 ? cardHeight * 2 : cardHeight * 3, backgroundColor: "transparent", opacity: 0, duration: 0.3, }); // animate each card back to 0 (for stacking) animation.to( card, { y: 0, duration: 0.3, // zIndex: index + 1, opacity: 0, }, 0 ); } }); } initCards(); ScrollTrigger.create({ trigger: ".wrapper-section", start: "top", pin: ".wrapper-section", end: () => `+=${(cards.length * cardHeight + header.offsetHeight)}`, scrub: true, animation, pinSpacing: true, markers: true, invalidateOnRefresh: true, onLeave: (e) => console.log(e), ease: "Power2.in", snap: { snapTo: 4, duration: { min: 0.1, max: 0.5 }, ease: "Power0.easeInOut", }, toggleActions: "restart none restart none", }); ScrollTrigger.create({ trigger: ".wrapper-section", start: "top top", pin: ".image", end: `+=${ cards[0].offsetHeight * images.length + header.offsetHeight + 200 }`, scrub: true, animation: imageAnimation, pinSpacing: true, invalidateOnRefresh: true, // toggleActions: "restart none restart none", }); ScrollTrigger.addEventListener("refreshInit", initCards); });