Brief Library / Free Website Animation Cheat Sheet

Free Website Animation Cheat Sheet

The formula, the eases and 5 real briefs from the Directed Motion Pack.

"Animate my hero" gets you a fade. A brief gets you motion that feels designed. This free cheat sheet shows how to write one: the five questions every motion line answers, the eases that fit each job, and five real briefs from the Directed Motion Pack.

Works with: Claude, ChatGPT

Get it free on Whop See 14 free examples

How to write a website animation prompt

Use the same structure every time. Every brief in this pack follows it (The Brief Formula):

WHAT MOVES: Name the element, not the vibe: "headline words", not "make it pop".
FROM WHERE: Direction and distance: "rise from a mask", "slide in from -40px".
HOW LONG: Milliseconds. Entrances 400 to 700ms, exits 300 to 400ms, press feedback 90 to 200ms.
WHICH EASE: Ease-out for entering, ease-in for leaving, linear only for loops.
IN WHAT ORDER: Start times and stagger: "60ms apart", "the button lands last".

14 free easing rules and fix-it prompts

Copy a brief, replace every [PLACEHOLDER] with your details and paste it into your AI tool.

Entering

expo.out or power3.out

Leaving

power2.in

Moving between two spots on screen

power3.inOut

Loops, spinners, marquees, scroll scrub

none (linear)

Breathing and floating

sine.inOut

One playful accent per screen

back.out(1.5 to 3)

Springy return

elastic.out(1, 0.4), use rarely

Feels slow

Cut every duration by 30% and every stagger in half. Keep the eases.

Feels robotic

Replace every linear ease on entrances with expo.out. Keep linear only on loops.

Too bouncy

Keep overshoot only on [element]. Everything else power3.out.

Everything moves at once

Stagger the elements 60 to 80ms apart in reading order. The button lands last.

Busy

Remove every loop except one. Make the one that stays at least 4s per cycle.

Janky on phones

Animate only transform and opacity. No width, top, left or shadows inside loops.

Forgot accessibility

Respect prefers-reduced-motion: show the end state and keep loops off.

How to use these briefs

Write one line per moving thing, not one line for the whole screen.
Answer five questions on every line: what moves, from where, how long, which ease, in what order.
Close every brief with the total time and the reduced motion fallback.
Paste the brief into Claude or ChatGPT and ask for one HTML file with GSAP from the CDN.
If the result is off, send a fix-it prompt instead of starting over.

What you get

Free Motion Brief Cheat Sheet: Animate Websites with Claude + GSAP

Easing cheat sheet: 7 briefs. Pick the ease by the job the motion does.
5 briefs from the pack: 5 briefs. Real briefs from the Directed Motion Pack. Each one produced a working component in the pack.
Fix-it prompts: 7. Paste one of these after the first result instead of starting over.
Format: instant download, a PDF, a page with a Copy button for every brief and a plain text file

Get it free on Whop

FAQ

How do I write a website animation prompt?

Give the model the same parts every time: WHAT MOVES, FROM WHERE, HOW LONG, WHICH EASE, IN WHAT ORDER. Fill each part with specifics such as sizes, timings, counts and what to avoid, instead of adjectives. The free briefs on this page show the full structure filled in.

Which AI tools does it work with?

Claude, ChatGPT or any model that writes HTML, CSS and JavaScript. The briefs ask for one HTML file with GSAP loaded from a CDN.

What do I get?

A PDF, a page with copy buttons for every brief and a plain text file.

Do I need to know GSAP?

No. The brief tells the model what to build. You save the result as an HTML file and open it in a browser.

How is this different from the Directed Motion Pack?

The cheat sheet has the formula and 5 briefs. The pack has all 30 briefs plus the finished component for each one.

More prompt packs

$15