Welcome to the lab. Here's what you just unlocked:

📚 The Course — 5 chapters, 15 lessons

Starts with rendering pipeline fundamentals, ends with you shipping a production animation system. Every lesson has runnable code and a hands-on exercise. Go in order — each lesson builds on the last.

💬 Community Chat

Post your work, ask questions, share bugs. I review code and give feedback directly. No question is too basic if you're genuinely stuck.

📦 Updates & Resources Feed

I'll post supplementary resources, new lesson announcements, and advanced techniques in the Updates & Resources section. Turn on notifications so you don't miss anything.

How to get the most out of this:

1. Open your editor side-by-side with each lesson

2. Type out every code example — don't copy-paste

3. Complete the exercise before moving to the next lesson

4. Post your exercise solutions in the community chat for feedback

The first lesson covers the animation mental model — understanding why certain properties animate smoothly while others destroy your frame budget. Start there.

See you in the chat.

Most Vue developers reach for transition: all 0.3s ease and call it a day. The result? Animations that stutter on mobile, feel sluggish on desktop, and make your app look like a prototype.

Here's the problem: you're animating the wrong properties.

The rendering pipeline in 30 seconds

Every frame your browser builds goes through these stages:

JavaScript → Style → Layout → Paint → Composite

Animating properties that trigger Layout (like width, height, top, left, margin, padding) forces the browser to recalculate geometry for the entire page — every single frame. At 60fps, that's 16.6ms per frame. Layout alone can eat 10-12ms of that budget.

The 3 properties that skip to Composite

These properties are handled entirely by the GPU compositor — they skip Layout and Paint completely:

1. transform — move, scale, rotate, skew

2. opacity — fade in/out

3. filter — blur, brightness, contrast (with caveats)

That's it. If your animation only touches these three, you get butter-smooth 60fps on almost any device.

The practical difference

❌ Animating left (triggers Layout):

.slide-enter-active {
  transition: left 0.3s ease;
}
.slide-enter-from {
  left: -100px;
}

✅ Animating transform (Composite only):

.slide-enter-active {
  transition: transform 0.3s ease;
}
.slide-enter-from {
  transform: translateX(-100px);
}

Visually identical. Performance difference is massive — especially on mid-range phones where your users actually are.

Quick audit for your existing animations

Open DevTools → Performance tab → record while triggering your animation. Look for:

• 🔴 Long purple "Layout" blocks = you're animating a layout property

• 🟢 Only green "Composite" blocks = you're in the fast lane

The Vue-specific trap

Vue's <Transition> component is powerful, but it doesn't protect you from animating bad properties. The -enter-active and -leave-active classes are just CSS — the same rules apply.

Common mistake with <TransitionGroup>:

/* ❌ Animating height for list items */
.list-move { transition: height 0.3s ease; }

/* ✅ Use transform instead */
.list-move { transition: transform 0.3s ease; }

<TransitionGroup> actually uses the FLIP technique internally for its move transitions — it calculates position differences and applies transform, which is exactly right. But if you override with layout properties in your CSS, you break the optimization.

---

This is the foundation everything else builds on. Inside the full course, we go deep on FLIP, staggered animations, scroll-driven motion, prefers-reduced-motion, and building a reusable composable library you can drop into any Vue project.

If your animations currently feel "off" — they probably are. And now you know why.