Blog

Animations You Describe Instead of Keyframe

Updated June 12, 2026

Animations You Describe Instead of Keyframe

Animations You Describe Instead of Keyframe

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

💡

Quick answer: You can add motion to your website by describing it — what moves, what triggers it, and how it should feel — and reviewing the draft like any other AI work. A good motion prompt names the element, the trigger (scroll, load, hover), the feel ("calm," "snappy," "one after another"), and the constraint (don't touch the text, simpler on mobile). Describe to create; open the visual editor when the change you want is a matter of feel you can only find by nudging.

Of everything on a website, animation has always had the highest skill floor. Copy you can write, photos you can take — but motion meant keyframes, easing curves, and timing charts, a craft with its own software and its own specialists. So most small-business sites had either no motion or a theme's canned effects, applied everywhere, meaning nothing.

With the visual motion editor in every workspace, that floor is gone: motion is now something you describe. But describing motion well is its own small craft — different from prompting for copy, because you're describing time and feel, not words. Here's the vocabulary, real prompts to steal, and the honest answer to when you should stop describing and start directing.

How to describe motion so it comes back right

A motion request needs four ingredients — same spirit as our page-change prompt anatomy, tuned for movement:

  • What moves — the element, named. "The three pricing cards," not "the page."
  • What triggers it — scrolling into view, page load, hover, a click. Motion without a stated trigger is where drafts go vague.
  • How it feels — and plain adjectives work: calm, quick, settle, drift, snap. "One after another, calmly" is a complete timing specification in five words; the AI translates feel-words into the curves and delays you'd otherwise be hand-tuning.
  • The constraint — what motion must never do: make text hard to read, delay the booking button, get fancy on mobile. The first rule of page motion — easier to understand, not harder to read — earns a standing place in your asks.

Prompts that work, by situation

The scroll reveal — the workhorse

Say this

"When the services section scrolls into view, have the three cards arrive one after another — calm, no bounce. The heading above them stays put. Keep it subtle on mobile."

Element, trigger, feel, two constraints. The "heading stays put" line is doing real work — anchored context is what makes the moving parts read as intentional.

The hero entrance — once, on arrival

Say this

"On the homepage, when the page loads: headline settles in first, then the subline, then the button — quick, finished within a second. Nothing else on the page animates on load."

The sequence mirrors how you want the page read, and the one-second budget keeps the entrance from taxing visitors who came to act. "Nothing else animates" is the restraint rule, stated as a constraint.

The number that earns its motion

Say this

"The three stats on the about page — years in business, projects done, five-star reviews — should count up from zero when they scroll into view. Fast at first, easing to a stop. Once only; don't replay if they scroll past again."

Counting is one of the few decorations that adds meaning — it makes a number feel earned. The once-only constraint is the difference between delightful and gimmicky on second viewing.

The hover that invites a click

Say this

"On the portfolio grid, when someone hovers a project: lift it slightly and show the project name — immediate response, no delay. On touch screens skip the hover and always show the names."

Hover prompts must say what happens where hover doesn't exist — the touch-screen clause is the one everyone forgets, and it's half the audience. (More portfolio-specific motion judgment in our portfolio guide.)

The canvas moment — when an image isn't enough

Say this

"Make a canvas visual for the launch section: our new logo assembling from its parts, then a soft glow settling. Brand teal on white, about four seconds, loops with a long pause between plays."

Canvas visuals are self-contained animated assets — describe them like a tiny film brief: subject, action, palette, duration, loop behavior.

Reviewing motion: watch it, then say what's off in feel-words

Motion drafts get the same treatment as every AI draft — reviewed before publishing — but the review is watching, not reading. Two passes:

  • The honest-screens pass. Preview desktop and mobile — motion that's elegant on a wide screen can overlap text or feel seasick on a phone, and simplifying for mobile is a design decision the preview lets you make on purpose.
  • The feel pass. Revise in the same vocabulary you created with: "slower," "less bounce," "start later," "finish before the button appears." You don't need timing numbers — the adjectives are the interface, and each round of feel-words converges fast.

When to stop describing and open the editor

Describing covers most motion work. But some changes are found, not specified — and that's what the visual editor is for. Open it when:

  • The difference you want is below words. You've said "slower" twice and it's still not right — the last 10% of feel lives in a drag, not a sentence.
  • Several things move together. Choreography across elements — what overlaps, what waits — is faster to judge on a timeline you can scrub than to specify blind.
  • You're framing a canvas visual. Pacing, framing, and focus are filmmaking judgments; make them with the picture in front of you.

The division of labor is the same one running through the whole workspace: describe to create, direct to refine. And once a moment finally feels right, save it as a reusable motion moment — your taste, encoded once, applied everywhere the pattern repeats.

Key takeaways

  • Motion prompts need four parts: what moves, what triggers it, how it feels, and what it must never do.
  • Plain adjectives are the timing interface: "calm, one after another, no bounce" replaces keyframes and curves.
  • State the mobile and touch behavior in the ask: it's the constraint everyone forgets.
  • Review by watching on both screen sizes, then revise in feel-words: "slower, start later, finish first."
  • Open the visual editor when the change is found rather than specified: final feel, multi-element choreography, canvas framing.
  • Save what finally feels right as a reusable moment: taste encoded once, repeated everywhere.

Frequently asked questions

I don't know animation terms. Can I really get good results?

The whole point is that you don't need them. "Calm," "snappy," "settle," "one after another" are better inputs than technical terms, because they describe the outcome you'll judge. If you can say how it should feel, you can direct it.

How much motion is too much for one page?

One memorable moment per page, plus quiet functional touches (reveals, hovers), is the working rule. If two animations compete for attention at the same time, cut one. Our motion-without-annoying guide covers the taste side in full.

Will described animations slow my site down?

Motion built through the workspace is engineered for customer-facing performance, and the AI defaults to restrained, lightweight moves. The risk to watch is quantity, not technology — which the one-moment-per-page rule handles.

What about visitors who prefer reduced motion?

Respecting reduced-motion preferences is part of the platform's defaults, and "simpler on mobile / skip on reduced motion" is a constraint you can state in any ask. Decorative motion should always have a graceful zero state.

Can I describe changes to an animation that already exists?

Yes — revision prompts are the normal workflow: "the services reveal starts too late, trigger it earlier," "make the hero entrance finish faster." Name the existing moment and say what's off in feel-words; you only open the editor when words stop being precise enough.

The next section of your site that feels static — the services grid, the stats, the launch banner — is one well-formed sentence away from moving. Describe it with the four ingredients, watch it on both screens, and save the version that feels like you.

Was this guide helpful?

Sunny Arora

Written by

Sunny Arora

Get technical deep dives delivered to your inbox

Join creators and developers who get exclusive insights, tutorials, and behind-the-scenes content every week.

No spam. Unsubscribe anytime.