Testimonial Drag Cards Playful — Motion Lab

← Blurr Motion testimonial-drag-cards-playful

Categorie testimonials Tier 1 Techniek #17 Deps gsap, Draggable

"Onze launch ging zo soepel — alsof het zichzelf deed."

"Het voelt speels en serieus tegelijk, zoals onze brand zelf."

"Onze conversie verdubbelde zonder de magie te verliezen."

"Eindelijk een site waar bezoekers blijven plakken."

drag the top card · or wait, it bounces

1. Mechanisme — kopieer 1-op-1, geen styling-keuzes

// Mechanisme: testimonial-drag-cards-playful
// Identieke stack-mechaniek als minimal, maar bouncy back.out(2) easing op
// fly-out + arrive. Pastel cards, soft shadow, rounded 24px, lichte tilt per layer.
import gsap from 'https://esm.sh/[email protected]';
import { Draggable } from 'https://esm.sh/[email protected]/Draggable';
gsap.registerPlugin(Draggable);
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

const cards = Array.from(document.querySelectorAll('.tdcp-card'));
let order = cards.slice();
let dragInst, autoTimer;

function layout() {
  order.forEach((c, i) => gsap.to(c, {
    x: 0, y: i * 10, scale: 1 - i * 0.05,
    rotation: i === 0 ? 0 : (i % 2 ? -2.5 : 2.5),
    zIndex: order.length - i, autoAlpha: i < 4 ? 1 : 0,
    duration: 0.7, ease: 'back.out(1.7)'
  }));
}
function flyOut(card, dir) {
  return gsap.to(card, {
    x: 380 * dir, rotation: 18 * dir, autoAlpha: 0,
    duration: 0.7, ease: 'back.out(2)',
    onComplete: () => {
      order.push(order.shift());
      gsap.set(card, { x: 0, rotation: 0 });
      layout();
      bindTop();
    }
  });
}

2. Skeleton — DOM + class-namen, mag herschikken

<!-- Skeleton: testimonial-drag-cards-playful -->
<div class="tdcp-stack">
  <article class="tdcp-card tdcp-c1"><p class="tdcp-quote">"..."</p><footer><b>Naam</b> · Rol</footer></article>
  <!-- x 4, elke card eigen pastel-class -->
</div>

3. Styling-template — verplicht eigen invulling per merk

/* Styling-template: testimonial-drag-cards-playful */
:root {
  --tdcp-bg: #FFE3EE;
  --tdcp-card-1: #FFF8F0;
  --tdcp-card-2: #B5E3FF;
  --tdcp-card-3: #C9F2D3;
  --tdcp-card-4: #FFD6A5;
  --tdcp-ink: #2A1A22;
  --tdcp-radius: 24px;
  --tdcp-shadow: 0 14px 40px -10px rgba(180,80,130,.25);
  --tdcp-font: 'Quicksand', system-ui, sans-serif;
}