Performance & Best Practices

The other performance

Final lap.

AnnieMation is powerful — too powerful if unleashed carelessly.

This page is the safeguard: how to keep motion fast, meaningful, and respectful of user experience.

---

🚀 Use GPU-Friendly Properties

Stick to transforms + opacity whenever possible.

/* Fast */
transform: translate();
opacity: 0.8;

/* Slow, layout-triggering */
width: 200px;
top: 20px;
left: 30px;

Transform + opacity = GPU acceleration.
Layout-altering properties = reflow city.

---

🧼 Keep Keyframes Lightweight

Avoid animating expensive properties:

• box-shadow (heavy)
• filter (heavier)
• blur() (heaviest)
• height/width (layout thrash)
• border-radius (surprisingly pricey)

Use sparingly — or fake with transforms.

---

🎚 Duration Discipline

Good UI motion is:

• 150–300ms for interaction
• 400–600ms for entrances
• 700ms+ only for cinematic or storytelling moments

Long animations feel sluggish unless justified.

---

📉 Avoid Motion Overload

If everything moves, nothing stands out.

Use animation to:

• reinforce hierarchy
• guide attention
• enhance clarity
• support interaction

Not to show off (unless it’s a demo — then go wild).

---

🧘 Respect prefers-reduced-motion

Always include it. Always.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

Zero effort, huge accessibility win.

---

🧩 Test on Low-End Devices

Animations that feel perfect on your M‑series MacBook
might stutter on lower‑powered hardware.

If it janks, simplify:

• fewer keyframe steps
• shorter shadows
• fewer simultaneous animations
• reduce blur/filter usage
• reduce DOM complexity in animated scenes

---

🐾 Performance Meter — Speedometer Edition

Left side = GPU-friendly.
Right side = jank-prone.

transform + opacity

shadow (heavy-ish)

filter / blur

---

➡️ You’ve completed 08 · AnnieMation — the final chapter of the Motion Trilogy.
From here, you can layer transforms + transitions + animations into expressive, modern UI experiences.