Intermediate6 min readShare
Was this chapter helpful?
Share
Make your website feel alive with movement. Preview each effect, then copy the prompt to ask AI for it.
Move your mouse over each box to see the effect:
Grows slightly on hover.
Floats up with a growing shadow.
Background color transitions smoothly.
Goes from translucent to fully visible.
A colored ring appears with a soft glow.
Rotates slightly on hover.
A line slides in from the left under text.
Background color fills from the left.
These play when an element first appears. Click "Replay" to see them again:
Gently appears from invisible to visible.
Slides up while fading in — the most popular.
Drops down from above while fading in.
Enters from the left side.
Enters from the right side.
Pops in from a smaller size.
Spins in while scaling up.
Items appear one after another in a wave.
These play continuously — great for loading states:
Classic loading spinner.
Expanding ring for notifications.
Pulsing placeholder for loading content.
Hops up and down. Great for scroll arrows.
Shakes side to side for attention.
Drifts up and down gently.
A light sweep across — for skeletons.
Three dots bounce in sequence.
Small animations that make your app feel responsive:
Shrinks on click for tactile feedback.
Smooth sliding between on/off.
Satisfying check animation.
Number updates with feedback.
Use these when describing animations to AI:
A smooth change from one state to another.
Use when: Any smooth hover or state change.
How long the animation takes. Quick = snappy. Slow = dramatic.
Use when: "Make it 300ms" or "slow it down"
How speed changes. "Ease out" = starts fast, slows down.
Use when: "Make it feel natural" or "add ease-out"
Each item waits before starting, creating a wave.
Use when: "Animate items one by one"
Making something bigger or smaller.
Use when: "Grow on hover" or "shrink on click"
How transparent. 0 = invisible, 1 = visible.
Use when: "Fade in" or "make see-through"
Moving, rotating, or resizing an element.
Use when: "Slide right" or "rotate the icon"
Plays when user scrolls to that section.
Use when: "Animate when it comes into view"
Bouncy, physics-based animation.
Use when: "Make it bouncy" or "add a spring"
Keep these in mind:
A few subtle animations = polished. Too many = chaotic.
Hovers and clicks should feel instant (under 200ms).
First appearances look better at 400-700ms.
Pick one or two styles and use them throughout.
Bouncy = playful. Smooth fades = professional.
Ask AI to use prefers-reduced-motion for accessibility.
Copy-paste these prompts into your AI tool to apply what you just learned.
ADD SCROLL ANIMATIONS
"Add subtle entrance animations to my page. Fade in each section as it scrolls into view, and add a slight upward slide to each card. Use a staggered delay so items appear one after another. Keep durations around 500ms with ease-out timing."
ADD HOVER EFFECTS
"Add hover animations to my [buttons / cards / links]. Make them [scale up slightly / change color smoothly / lift up with a shadow] on hover. Keep the transition fast (200ms) so it feels responsive. Also add a subtle press-down effect on click."
ADD LOADING STATES
"Add animated loading states to my app. Show pulsing skeleton placeholders shaped like the real content while data is loading. Add a spinning indicator for buttons that are processing. Use smooth transitions when the real content replaces the skeletons."
