By Mehdi HassanHow much does website animation cost?
Website animation costs anywhere from almost nothing, when it's a few CSS transitions built with the page, to a large share of the project, when it's custom 3D or an interactive illustration. The type of motion sets the price far more than how many things move.
We don't quote market dollar ranges for animation alone, because we haven't found reliable public data that separates it from design and build. Even for whole landing pages, the ranges we see quoted in published cost guides run from about $500 to $25,000 and disagree with each other. What we can do is show what each type of animation asks for, so you can read a quote. For when motion is worth paying for at all, start with our guide to motion design for marketing websites.
- Landing page: copy, design, Next.js build, animated, fixed price
- $6,000
- Website up to 6 pages, animated, +$500 per extra page
- $8,000
- Trial week of design and development
- $1,000
What does each type of website animation cost?
Each type of animation costs a different mix of design time, build time and ongoing weight on the page. The table ranks them by relative cost and shows what you're paying for, because those parts are what change between quotes.
Type | Relative cost | What you pay for | Ongoing cost |
|---|---|---|---|
CSS transitions and hover states | Lowest | A motion system and careful timing | Almost none |
Scroll reveals and scroll-linked motion | Low to medium | Choreography, performance testing, reduced-motion styles | Low, unless a heavy library is loaded |
Lottie illustration loops | Medium | Illustration, After Effects animation, export and file tuning | File weight and player script |
Rive interactive graphics | Medium to high | Illustration, rigging, state machines, runtime setup | Runtime weight and editor access |
Coded product UI animation | Medium to high | Simplified UI redrawn as components, sequencing | Updates when the product changes |
3D and WebGL scenes | Highest | Modeling, lighting, shaders, optimization, fallbacks | Performance upkeep and device testing |
The cheaper end isn't a lesser choice. Most marketing sites need a consistent set of micro-interactions, a hero that explains the product and a few scroll reveals, which is what our guide to micro-interactions and hero section animation recommend. Pay for the expensive types only where a static layout can't do the job.
What drives website animation cost?
Website animation cost is driven by how much has to be drawn, how much has to be choreographed and how much has to stay fast on a cheap phone. Six factors explain most of the gap between two quotes for the same page.
- New artwork. Animating existing UI is cheaper than illustrating new scenes or modeling 3D objects from scratch.
- Interactivity. Motion that reacts to hover, scroll position or clicks needs states and logic, not just a timeline.
- Choreography. One reveal is quick. A sequence where several elements move in order across a long scroll takes design, build and testing rounds.
- Performance work. Keeping motion smooth on mid-range phones means compressing files, lazy-loading and animating the right properties.
- Accessibility. A real reduced-motion version is extra design work, and it's not optional.
- Editability. Motion built into reusable components costs more once and less every time marketing adds a section.
Performance is the driver buyers forget. Heavy scroll-driven JavaScript can slow interaction, and fixing it after launch costs more than designing for it. Our guide to scroll animations without killing performance covers what to ask for.
How much does Lottie animation cost?
Lottie animation cost is mostly illustration and animation time, because a Lottie file is a vector animation usually made in After Effects and exported to JSON or the dotLottie format. If the artwork exists, the cost is the animation. If it doesn't, you're paying for an illustrator first.
The hidden costs sit on the page. Long or detailed Lottie files get heavy and can work the CPU hard, and the player script adds weight, so a good build trims layers, lazy-loads files below the fold and pauses loops off screen. Lottie also suits illustrated loops better than real product screens. Our comparison of GIF, video, Lottie and code for product demos shows when another format is cheaper for the same job.
What does Rive animation cost compared with Lottie?
Rive animation usually costs more than Lottie to make, because the price buys interactivity: Rive files contain state machines that respond to hover, clicks and input, not just a timeline that plays. You're paying for rigging and logic as well as drawing.
That extra work pays off when one graphic has to react, such as an illustrated toggle, a character that follows the cursor or an onboarding graphic with several states. For a loop that only plays, Lottie or CSS is cheaper. Rive also needs its web runtime on the page and access to Rive's editor for future edits, and Rive's documentation says exporting files for runtime needs a paid editor plan, so check Rive's current plans before you commit, and ask who will own the source files after launch.
How much does a 3D website cost?
A 3D website costs the most of any animation type, because it combines three jobs: making the 3D asset, building the scene in WebGL with a tool such as Three.js or Spline, and keeping it fast. The third job is the one cheap quotes leave out.
Scenes need compressed models and textures, lower-detail versions for phones, a static fallback for weak devices and for reduced-motion users, and loading that doesn't block the headline. Each of those is real work, and skipping them gives you a site that looks good on the designer's laptop and stutters everywhere else. Real 3D earns its cost when the product is physical or spatial. For a software product, coded UI motion usually explains more for less, as our comparison of GSAP, Motion and CSS explains.
Hypothetical example: scoping motion on one landing page
For example, suppose a seed-stage AI startup wants an animated landing page. A heavy brief might ask for a 3D hero object, a Lottie illustration in every section and a scroll-pinned story. A scoped brief keeps the expensive work where it explains something: a coded hero showing input becoming output in three steps, scroll reveals from one motion system, and micro-interactions on the CTA and form.
The scoped version needs no 3D modeling and no illustration pipeline, ships one small motion library, and has a reduced-motion version designed alongside it. It explains the product better and costs less to build and keep fast. This is illustrative, not a client project.
Is animation included in a landing page price?
In our pricing, yes. Our landing page package is $6,000, fixed, and covers copy, design, a Next.js build and purposeful animation, because we design motion with the page rather than quoting it as an extra. Bespoke 3D scenes or large illustration sets are scoped on the intro call.
Elsewhere, check every quote for what animation means. Some include only hover states, some bill motion by the hour, and some subcontract illustration or 3D. Ask which types are included, who makes the artwork, whether a reduced-motion version is part of it, and how edits work after launch. Our landing page design page shows what our package covers, and the website cost estimator helps you price a multi-page site. For wider context, see what a startup website costs by scope.
How do you keep animation costs under control?
Keep animation costs down by deciding what each piece of motion must explain before anyone animates it, and by choosing the cheapest type that does that job. Most overruns come from motion added late, redone after performance testing or rebuilt for every new section.
- Write the copy first, then mark the two or three moments where motion explains something.
- Pick the cheapest type per moment: CSS before a library, coded UI before 3D.
- Define a small motion system of durations and easing, so every section reuses it.
- Set a performance budget and test on a mid-range phone before sign-off.
- Build motion into components so new sections inherit it without a developer.
Plan for upkeep too. Animation libraries need updates, and product animations go stale when the product changes. Our guide to website maintenance costs covers what that looks like month to month.
