Animation & Dynamic Effects

Motion adds life to UI and communicates information hierarchy intuitively. The key to animation prompts isn’t just describing how something moves — it’s also saying when, how long, and at what speed.

---

4 Core CSS Animation Types

Fade-in

Elements transition from transparent to opaque. The most versatile and unobtrusive entrance effect.

Add a simple fade-in animation to the hero section that transitions from opacity 0 to 1
over 800ms with an ease-in-out timing function.

---

Slide-in

Elements move into position from off-screen. Ideal for sidebars and drawers.

Create a slide-in animation for the sidebar that enters from the left with
a transform: translateX(-100%) to translateX(0) transition.

---

Blur Effect

Elements transition from blurred to sharp — a dramatic entrance.

Apply a blur-in effect to images where they start with filter: blur(10px)
and transition to filter: blur(0) when they enter the viewport.

---

Staggered Animation

Multiple elements appear in sequence with slight time offsets. Effective for lists and feature showcases.

Create a staggered entrance for list items where each item appears
150ms after the previous one using incremental animation-delay values.

---

Animation Timing Controls

The “feel” of an animation is determined by its timing properties.

Property	Meaning	Example
animation-duration	How long the animation takes	500ms
animation-delay	How long before it starts	250ms
animation-timing-function	Speed curve	ease-in-out

Use negative delay to start an animation partway through its cycle:

Set animation-delay: -2s to start the animation 2 seconds into its cycle.

---

Text Animation Techniques

Character Reveal

Characters appear one by one, creating a typing effect.

Create a character-by-character reveal animation for the main headline
using Inter font, with 50ms delay between each character.

---

Word Fade Up

Words fade in while rising upward, one after another.

Create a staggered fade-up animation for each word in the tagline,
with 100ms delay between words.

---

Letter by Letter

Each letter appears with a scale effect — dynamic and playful.

Create a letter-by-letter animation with a subtle scale effect
and 80ms staggered delay, using a bold display font.

---

Gradient Text Animation

An animated gradient background clipped to the text.

Apply a moving gradient background from blue to purple to the main heading,
animating horizontally over 3 seconds in a loop.

---

Clipped Reveal

Text reveals left-to-right through a clipping mask.

Create a text animation that reveals the title from left to right
using a clipping mask over 800ms with an ease-out timing function.

---

JavaScript Animation Libraries

For more sophisticated effects, specify a JS library.

GSAP

Professional-grade animation. Handles complex sequences and physics.

Use GSAP to implement a staggered fade-in for the features list
as users scroll down the page.

---

Vanta.js

Animated backgrounds with minimal configuration.

Use Vanta.js BIRDS effect as a subtle animated background
for the newsletter signup section.

---

Three.js

3D scenes and models in the browser.

Create a landing page with a Three.js background featuring
a slow-rotating 3D model of the product.

---

COBE.js

Lightweight library for interactive 3D globes.

Add a COBE.js globe to the "Global Presence" section
that highlights office locations with markers.

---

Animation Best Practices

• Keep UI interaction animations under 500ms
• Animations should be subtle and purposeful — excess motion hurts UX
• Implement prefers-reduced-motion to respect user accessibility settings

Disable all animations for users who have prefers-reduced-motion: reduce set.