Card Carousel

Code

:root {
  color-scheme: light;
  --bg: #f1efe8;
  --bg-accent: #f9f6f1;
  --ink: #1d1d1b;
  --muted: #6c675d;
  --accent: #d27b5b;
  --card-radius: 28px;
  --shadow: 0 30px 80px rgba(29, 29, 27, 0.2);
  font-family: "Cormorant Garamond", "DM Serif Display", serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #fff7ec 0%, #f1efe8 45%, #e4e0d7 100%);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}

.stage {
  width: min(1100px, 100%);
  display: grid;
  gap: 28px;
}

.hero {
  display: grid;
  gap: 8px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--muted);
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.hero h1 {
  font-size: clamp(2.6rem, 4vw, 4.2rem);
  font-weight: 600;
}

.sub {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1rem;
  color: var(--muted);
  max-width: 420px;
}

.card-wrap {
  position: relative;
  height: clamp(360px, 55vh, 520px);
  border-radius: var(--card-radius);
}

.card {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transform-origin: 50% 100%;
  background: var(--bg-accent);
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95) contrast(1.02);
}

.card-label {
  position: absolute;
  left: 24px;
  bottom: 24px;
  color: #fff;
  text-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
}

.card-label span {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
}

.card-label h2 {
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  font-weight: 600;
}

.meter {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
}

.meter-bar {
  flex: 1;
  height: 4px;
  background: rgba(29, 29, 27, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.meter-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #f2b991);
  border-radius: inherit;
}

@media (max-width: 720px) {
  .card-label {
    left: 18px;
    bottom: 18px;
  }
}

const cards = Array.from(document.querySelectorAll(".card"));
const fill = document.querySelector(".meter-fill");

const intervalMs = 3800;
let active = 0;

const baseDepth = 40;

function layoutCards() {
  cards.forEach((card, index) => {
    const offset = (index - active + cards.length) % cards.length;
    const depth = Math.min(offset, 3);
    const scale = 1 - depth * 0.06;
    const y = depth * 18;
    const rotate = depth * -2.2;
    const opacity = depth > 3 ? 0 : 1;

    gsap.set(card, {
      zIndex: cards.length - depth,
      scale,
      y,
      rotate,
      opacity,
      filter: depth === 0 ? "brightness(1)" : "brightness(0.85)",
    });
  });
}

function animateToNext() {
  const current = cards[active];
  active = (active + 1) % cards.length;
  const next = cards[active];

  const tl = gsap.timeline();
  tl.to(current, {
    y: -baseDepth,
    rotate: 6,
    scale: 0.96,
    opacity: 0,
    duration: 0.65,
    ease: "power2.in",
  })
    .set(current, { y: 0, rotate: 0, opacity: 1 })
    .add(() => layoutCards())
    .fromTo(
      next,
      { scale: 1.04, y: 22 },
      { scale: 1, y: 0, duration: 0.6, ease: "power2.out" },
      "<"
    );
}

function startMeter() {
  gsap.fromTo(fill, { width: "0%" }, { width: "100%", duration: intervalMs / 1000, ease: "none" });
}

function cycle() {
  animateToNext();
  startMeter();
}

layoutCards();
startMeter();
setInterval(cycle, intervalMs);

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Card Animation</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Space+Grotesk:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://images.unsplash.com" />
  </head>
  <body>
    <main class="stage">
      <header class="hero">
        <p class="eyebrow">Auto-transitioning image cards</p>
        <h1>Card Carousel</h1>
        <p class="sub">Smooth, timed transitions with GSAP.</p>
      </header>

      <section class="card-wrap" aria-live="polite">
        <div class="card" data-index="0">
          <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80" alt="Forest with fog" />
          <div class="card-label">
            <span>01</span>
            <h2>Mist Forest</h2>
          </div>
        </div>
        <div class="card" data-index="1">
          <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1200&q=80" alt="Mountain landscape" />
          <div class="card-label">
            <span>02</span>
            <h2>Alpine Calm</h2>
          </div>
        </div>
        <div class="card" data-index="2">
          <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?auto=format&fit=crop&w=1200&q=80" alt="Coastal road" />
          <div class="card-label">
            <span>03</span>
            <h2>Coastline Drive</h2>
          </div>
        </div>
        <div class="card" data-index="3">
          <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=1200&q=80" alt="Snowy mountain" />
          <div class="card-label">
            <span>04</span>
            <h2>Snow Peaks</h2>
          </div>
        </div>
        <div class="card" data-index="4">
          <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1200&q=80" alt="Ocean wave" />
          <div class="card-label">
            <span>05</span>
            <h2>Ocean Pulse</h2>
          </div>
        </div>
      </section>

      <div class="meter" aria-hidden="true">
        <span class="meter-label">Interval</span>
        <div class="meter-bar">
          <div class="meter-fill"></div>
        </div>
      </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

An auto-advancing card carousel where each image card animates through depth, tilt, and brightness changes, driven by a GSAP timeline and a visual interval meter.

How it works

Stacked layout: Cards are absolutely positioned and layered with z-index, scale, and vertical offset to create depth.
GSAP timeline: Each interval animates the active card out and the next card in, then relays out the whole stack.
Progress meter: A simple bar animates from 0% to 100% over the interval duration so users can feel the timing.

When to use it

Hero sections with cinematic image rotations
Highlighting destinations, case studies, or featured content
Any layout where you want a single focal card that changes over time