Motion that helps people decide, not motion that makes them wait
Production-grade motion that enhances engagement instead of fighting it, scroll choreography and micro-interactions that stay 60fps.
Scroll choreography, written as five beats
This is what "scroll animation" means when it is being designed rather than switched on: decisions about what enters, in what order, what the page holds on, and where every element comes to rest.
Arrive
Each element enters from the direction the eye is already travelling. A reveal that comes from nowhere in particular is the tell that a page was decorated rather than choreographed.
clip-path + transform
Sequence
Order carries meaning. The figure lands before its label, the picture before its caption, the heading before the paragraph it governs. A stagger is a sentence, not a sprinkle.
stagger, 45–90ms
Hold
The page slows where the content earns it and nowhere else. Pinning and scrubbing are for the one moment worth pausing on, used on everything, they are just friction.
scrub, tied to scroll
Hand off
One section ends where the next begins, so the page reads as one continuous move rather than as eleven independent fade-ins that happen to share a stylesheet.
shared easing curve
Rest
Everything finishes somewhere it can stay. The resting state is the static state, which is exactly why this page is complete with no JavaScript running at all.
final state = static state
Three specimens, running on this page
Not a video of somebody else's website. Each one names the properties it moves, how long it takes and the curve it takes it on, and each one is sitting at its finished state right now if you have reduced motion switched on.
Uncovered, not faded.
A masked reveal
The heading rises through a clip window rather than fading in place. It reads as type being uncovered, which is a different gesture from type appearing.
- Moves
- clip-path, transform, opacity
- Duration
- 1.15s
- Easing
- expo.out
- 01Discovery & strategy
- 02Design
- 03Development
- 04Testing & QA
A stagger with an order
Four rows entering 60 milliseconds apart. Slow enough to be read as a sequence, fast enough that nobody is waiting on row four.
- Moves
- transform, opacity
- Duration
- 0.8s each
- Easing
- power3.out, 60ms apart
+128%bookings lift
A figure that counts
The final value is written in the markup first and the tween counts up to it, so a failed script or a reduced-motion visitor still reads the real number.
- Moves
- text value only
- Duration
- 1.5s
- Easing
- power3.out
The play controls are only rendered when script is running and the motion preference allows it. With either one absent, the three specimens above are simply finished pieces of a page.
Three rules, and what each one costs
The limits are the reason the motion is safe to ship. A studio that will not tell you what its animation rules out has not got any.
Only four properties are ever animated
Transform, opacity, clip-path and filter. Those are the four the browser can move without re-running layout, which is what keeps a sixty-frame budget achievable on a mid-range phone.
The costRules out animating height, width, margin, top or left, every one of which relayouts the page and gets charged to your layout-shift score.
Reduced motion is a path, not an apology
When the preference is set, the motion context is never built in the first place. Nothing is left hidden, clipped or displaced by a tween that was never going to run.
The costRules out the common shortcut of shipping a stylesheet that hides everything and hoping the script arrives to reveal it.
Motion has a budget, like every other asset
It never blocks the first paint, never delays reading, and is profiled on a phone-class device rather than on the machine that authored it. Sixty frames is the floor, not the aspiration.
The costRules out the ten-second scroll-jacked intro, the autoplaying video header, and any effect whose only justification is that the tool offers it.
Rule one is also a performance rule: animating a layout property is one of the most reliable ways to earn a layout-shift penalty, which is why it turns up again on the performance page.
Where motion earns its place, and where it is covering
Every item on the right is something we have been asked for. Read that column first; it is the more useful half of the conversation.
It is doing a job when it is
- Sequencing something that genuinely has an order, a process, a build-up, a before and an after
- Showing a state change: opened, selected, sent, still loading
- Orienting someone on arrival, so they know what just happened and what changed
- Pointing at the one action the page is actually asking for
It is covering for something when it is
- Anything the reader has to sit throughIf the content is behind the animation, the animation is a queue.
- Motion standing in for hierarchyIf it only reads because it moved, it will not read at all on the second visit.
- A carousel running on its own timerMovement nobody asked for, on a schedule nobody set.
- An effect that exists because the tool has itThe most common reason for animation on the web, and the worst one.
Five steps, and the last one is the fallbacks
A motion pass is scoped like any other engagement: agreed up front, built against the real page, and signed off on a device rather than in a screen recording.
Decide what the motion is for
Named per section, against what that section is supposed to make someone do. Anything that cannot answer the question does not get built.
Storyboard the beats
Against the real content at real lengths: not against a placeholder block that happens to be the convenient height.
Author it on the built page
Written in GSAP against the actual Webflow build, so what you approve is the thing that ships rather than a prototype of it.
Hold the frame rate
Profiled on a phone-class device. Anything that cannot hold sixty frames there is simplified until it can, or it is cut.
Verify both fallbacks
The reduced-motion path and the no-JavaScript path are checked as deliverables, not assumed. The page has to be finished in all three states.
Authored with
- PlatformWebflow
- DesignFigma
- MotionGSAP
$2,000
flat packages from, motion is quoted the same way
A motion pass on an existing site is scoped section by section and quoted flat before it starts. Inside a full build it is one of the twelve deliverables rather than a line item, how much motion the build carries is one of the four things that moves the price of a custom design and development engagement.
What motion is usually scoped next to
Motion is the last decision on a page and the first one people ask for. These are the five that decide whether there is anything worth choreographing.
- Custom Webflow design & developmentFully custom, brand-aligned sites built for speed and conversions. No template wrestling, no plugin bloat, clean structure your team can extend.
- WordPress to Webflow migrationPreserve every SEO ranking while gaining speed and content management your marketing team can actually use. Redirect maps and parity checks included.
- Webflow SEO servicesHigher rankings and organic traffic with measurable conversion gains, schema markup, crawl hygiene, internal linking and content architecture.
- Website management & supportOngoing maintenance, uptime monitoring and dedicated troubleshooting. Issues get resolved, not logged and forgotten.
- Performance optimizationEnhanced speed and responsiveness for better SEO and user experience, asset budgets, font strategy and render-path cleanup.
All six on one page: Webflow services. And the ongoing version, the site kept fast and kept current after the motion ships, is the support retainer.
Questions asked before any of it is built
Anything not answered here gets a reply within one business day.
Will animation slow the site down?
Not when it is built to a budget. Only transform, opacity, clip-path and filter are animated, motion never sits in front of the first paint, and the build is still held to the same four numbers, including 0.00 layout shift.
What does someone with reduced motion turned on actually see?
The finished page. When the preference is set the motion context is never created, so nothing is hidden waiting for a tween. Every element is already at the position and opacity it was going to end at.
Does the page still work with JavaScript off?
Yes, and that is a design rule rather than a happy accident. Every resting state is the static state, so a failed bundle or a blocked script costs you the motion and nothing else.
Can you add motion to a site that already exists?
Yes, scoped to the sections where it earns something. The alternative, a pass of fade-ins across every block on every page, is the version that makes a site feel slower rather than more considered.
Webflow interactions, or code?
Both, chosen per job. Webflow’s own interactions are the right tool for straightforward hover and scroll states your team may want to edit later; GSAP is what gets used when a sequence has to be authored, timed and profiled.
How long does a Webflow build take?
Most projects run four to eight weeks end to end, across discovery, design, build, QA and launch. Timelines hold because the sequence is the same every time.
What does a project cost?
Flat, transparent packages starting at $2,000. You get the figure before work starts, so there is a budget you can plan around rather than an hourly estimate that drifts.
Will moving from WordPress to Webflow hurt our search rankings?
No. Migrations include a full redirect map and parity checks, so every ranking is preserved while the site gains speed and a CMS your marketing team can actually use.
Can our team update the site without a developer?
Yes. Every launch includes hands-on one-to-one CMS training, and the build is structured with clean, semantic components your team can extend on their own.
What happens after launch?
Ongoing maintenance, uptime monitoring and dedicated troubleshooting on a retainer. Issues get resolved, not logged and forgotten.
Send the page. We will tell you what should move on it.
Design that converts, speed that scales. A section-by-section read of where motion would earn something, what it would cost in weight, and a flat quote in writing before anything is authored.
- 4properties ever animated
- 60frames a second, held on a phone
- 0.00zero layout shift
- $2,000flat packages from