Let Animate

RizAli12

Custom Svelte 5 transition functions with spring tilt, glow effects, and animated filtering. Zero dependencies, pure CSS.

Demo Download

let-animate

A showcase of custom Svelte 5 animation techniques — built with pure CSS, zero dependencies, and runes syntax.

Live Demo

🔗 let-animate.vercel.app

What's Inside

An animated card grid featuring three hand-crafted Svelte transition functions:

Transition	Effect
`rippleFloat`	Card lifts upward with a blur dissolve
`magneticSnap`	Elastic bounce entrance from the side
`unfold`	Scales open from the top like unfolding paper

Each card also has:

Spring-based 3D tilt that follows your cursor in real time
Per-card glow blob driven by a CSS custom property accent color
Filter system with animated mount/unmount per category
Staggered entrance — each card animates in with a delay offset

Tech Stack

Svelte 5 — runes syntax ($state, $derived)
SvelteKit
Pure CSS — no Tailwind, no UI libraries
Zero runtime dependencies

Getting Started

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npm run build

Project Structure

src/
├── lib/
│   └── AnimatedCard.svelte   # Main component with all animations
└── routes/
    ├── +layout.svelte
    └── +page.svelte

Key Concepts

Custom Transition Functions

Svelte's transition API accepts any function that returns { delay, duration, easing, css }. This project uses that to build transitions far beyond what fly, fade, or scale offer out of the box.

const rippleFloat = (node, { delay = 0, duration = 600, y = 40 } = {}) => ({
  delay,
  duration,
  easing: cubicOut,
  css: (t) => {
    const eased = cubicOut(t);
    return `
      opacity: ${eased};
      transform: translateY(${(1 - eased) * y}px) scale(${0.9 + eased * 0.1});
      filter: blur(${(1 - eased) * 6}px);
    `;
  },
});

Spring Tilt

Mouse position is tracked relative to the card's bounding box and fed into a Svelte spring store, which smoothly interpolates the 3D rotation values via CSS custom properties.

Top categories