I'm currently working on a project where I am using GSAP with ScrollTrigger to achieve a scroll-based testimonial sliding effect. I've managed to achieve about 90% of the functionality, but I'm stuck on the last part involving a tilt effect based on scroll.
For reference: Byooooob. Please visit this website and scroll down to the section named "KISSIES FROM OUR PARTNERS".
Here you can see that by default, the 1st card is straight horizontally, and the 2nd and 3rd are slightly tilted. However, when we start scrolling and the 1st card begins to move out of the viewport, the 2nd card becomes straight horizontally, and the 4th card gets tilted, continuing this pattern for the rest of the cards.
I have tried every way possible but have not been able to achieve this animation effect. Adjusting the scroll sequence is a bit difficult for it. Can you guide me on how to achieve the same tilted effect on my testimonial cards? It would be very helpful for me.
gsap.registerPlugin(ScrollTrigger); const cards = gsap.utils.toArray(".testimonial-card"); const getTimeline = (breakpoint) => { switch (breakpoint) { case "max-width: 600px": return gsap.timeline() .to(".testi_1", { xPercent: -200, duration: 1, ease: "power1.out" }) .to(".testi_2", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_3", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_4", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_5", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_6", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_7", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_8", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_9", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.5") .to(".testi_10", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.5"); case "max-width: 1000px": return gsap.timeline() .to(".testi_1", { xPercent: -200, duration: 1, ease: "power1.out" }) .to(".testi_2", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_3", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_4", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_5", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_6", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_7", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_8", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_9", { xPercent: -200, duration: 1, ease: "power1.out" }, "-=0.3") .to(".testi_10", { xPercent: 200, duration: 1, ease: "power1.out" }, "-=0.3"); case "min-width: 1001px": return gsap.timeline() .to(".testi_1", { xPercent: -300, duration: 1, ease: "power1.out" }) .to(".testi_2", { xPercent: 300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_3", { xPercent: -300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_4", { xPercent: 300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_5", { xPercent: -300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_6", { xPercent: 300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_7", { xPercent: -300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_8", { xPercent: 300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_9", { xPercent: -300, duration: 1, ease: "power1.out" }, "-=0.4") .to(".testi_10", { xPercent: 300, duration: 1, ease: "power1.out" }, "-=0.4"); default: return gsap.timeline(); } }; const createScrollTrigger = (breakpoint) => { const tl = getTimeline(breakpoint); ScrollTrigger.create({ animation: tl, trigger: ".testimonials-section", start: "top top", end: "+=3000", scrub: true, pin: true, anticipatePin: 1 }); }; if (window.matchMedia("(max-width: 600px)").matches) { createScrollTrigger("max-width: 600px"); } else if (window.matchMedia("(max-width: 1000px)").matches) { createScrollTrigger("max-width: 1000px"); } else if (window.matchMedia("(min-width: 1001px)").matches) { createScrollTrigger("min-width: 1001px"); } body { overflow-x: hidden; } .testimonials-section { padding: 0px; background: #f9f9f9; position: relative; height: 100vh; overflow: hidden; margin-top: 500px; margin-bottom: 500px; } .testimonials-section h2 { text-align: center; margin-bottom: 20px; } .testimonials { display: flex; overflow: hidden; } .testimonial-card { min-width: 100%; padding: 20px 0px; box-shadow: 0 0 10px rgba(0,0,0,0.1); text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; pointer-events: none; } .testimonial-card.active { opacity: 1; pointer-events: auto; } .testi_1 { height: 300px; width: 400px; background: red; z-index: 11; transform-origin: top right; } .testi_2 { height: 300px; width: 400px; background: green; z-index: 10; transform-origin: top right; } .testi_3 { height: 300px; width: 400px; background: blue; z-index: 9; transform-origin: top right; } .testi_4 { height: 300px; width: 400px; background: yellow; z-index: 8; transform-origin: top right; } .testi_5 { height: 300px; width: 400px; background: violet; z-index: 7; transform-origin: top right; } .testi_6 { height: 300px; width: 400px; background: orange; z-index: 6; transform-origin: top right; } .testi_7 { height: 300px; width: 400px; background: sienna; z-index: 5; transform-origin: top right; } .testi_8 { height: 300px; width: 400px; background: fuchsia; z-index: 4; transform-origin: top right; } .testi_9 { height: 300px; width: 400px; background: rebeccapurple; z-index: 3; transform-origin: top right; } .testi_10 { height: 300px; width: 400px; background: palegreen; z-index: 2; transform-origin: top right; } .testi_11 { height: 300px; width: 400px; background: darkblue; z-index: 1; transform-origin: top right; }<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script><div class="testimonials-section"><div class="testimonials"><div class="testimonial-card active"><div class="testi_1"><h1>Testimonial 1</h1></div></div><div class="testimonial-card"><div class="testi_2"><h1>Testimonial 2</h1></div></div><div class="testimonial-card"><div class="testi_3"><h1>Testimonial 3</h1></div></div><div class="testimonial-card"><div class="testi_4"><h1>Testimonial 4</h1></div></div><div class="testimonial-card"><div class="testi_5"><h1>Testimonial 5</h1></div></div><div class="testimonial-card"><div class="testi_6"><h1>Testimonial 6</h1></div></div><div class="testimonial-card"><div class="testi_7"><h1>Testimonial 7</h1></div></div><div class="testimonial-card"><div class="testi_8"><h1>Testimonial 8</h1></div></div><div class="testimonial-card"><div class="testi_9"><h1>Testimonial 9</h1></div></div><div class="testimonial-card"><div class="testi_10"><h1>Testimonial 10</h1></div></div><div class="testimonial-card"><div class="testi_11"><h1>Testimonial 11</h1></div></div></div></div>