Website Animation Cost: Quote Artwork, Player, Integration

Executive Summary

Buying "a website animation" is really three purchases that are easy to blur into one invoice: the editable artwork and agreed exports, a compatible player or runtime plus its integration into the page, and the documented page behavior with a named owner for later changes. A preview that looks right in a design tool shows only the first purchase. This report, current as of November 14, 2026, argues that a quote becomes comparable only when each purchase is priced and accepted separately, and it supplies a quote sheet and a matching behavior table for doing so.

No authoritative public price per second or per animation exists. The sources opened for this report show provider-specific figures only: one freelancer listing starts at $180 per animation for buttons, icons and micro-interactions ^[1], a talent platform's booking data shows an average motion graphics rate of $64 per hour ^[2], and the US Bureau of Labor Statistics reports a $102,030 median annual wage for special effects artists and animators in May 2025 ^[3]. None of these is a market price for a finished component. The report therefore recommends a quoted project cost built from separately priced artwork, implementation, agreed quality assurance, confirmed licenses and hosting, and separately quoted continuing changes.

Format claims should be tested against the actual file and player, not inferred from a file suffix. Rive states that some features require its own renderer and that support varies by runtime (Source: rive.app), while LottieFiles says Lottie does not support every After Effects feature and that support depends on the player ^[4]. Lottie is also no longer a non-interactive format: dotLottie packages can carry state machines ^[5]. A static image or a rendered video is often the correct deliverable, and some requests belong with an animation specialist.

Accessibility and delivery obligations belong in the sheet. W3C's pause, stop, hide criterion is Level A and applies under stated conditions, including motion lasting more than five seconds ^[6], and Rive's documentation says it does not apply reduced motion automatically (Source: rive.app). No benchmark was run for this report, so it publishes no performance league table. The recommended sequence is to write a behavior map, price three purchases, test one representative component on the real page, and record who owns player updates.

Introduction and Background

Marketing leads at software and e-commerce companies, and the agencies that serve them, regularly commission an animated hero illustration or a small interactive diagram. The request arrives as one line item, but the result depends on three kinds of work done by different people: a motion designer produces the artwork and exports; a developer loads a player, places it in the content management system (CMS) and handles failures; and someone on the client side decides what the page does for people who prefer not to watch motion and who maintains it afterward.

Published comparison guides already cover authoring workflow and runtime differences. One peer guide states that the main difference between the formats is the authoring workflow, with Lottie playing After Effects animations exported as JSON and Rive using its own editor and binary format (Source: charmotion.app). That guide also notes that there is no neutral benchmark that settles the size question (Source: charmotion.app). This report does not repeat a format verdict. Its gap-filling contribution is a buyer's quote and acceptance pack.

Scope of this report. It covers commissioning website output: what to ask a designer, what to ask a developer, what to write into a behavior table, and when to choose no animation. It is not a developer-framework comparison or a tutorial, and it scopes one component check, not whole-site accessibility conformance.

Publisher perspective. The publisher of this guide, Tapflare, sells a flat-rate monthly design and website development subscription managed by a dedicated project manager, in which the client keeps ownership of export and source files. Such a subscription suits steady design and web output. It is not an animation specialist and not the right fit for a single one-off job. Complex or interactive animation, and any particular player or runtime workflow, should be confirmed in a written scope before purchase with any supplier, including the publisher. Where complexity exceeds a general subscription's scope, this report recommends a specialist.

Method and limits. Facts below come from vendor documentation, standards bodies, browser-vendor documentation, government statistics and supplier pages opened on November 14, 2026. Prices are each provider's own, as displayed that day, and are not equivalent deliverables. No file-size, speed or memory benchmark was run.

Decide What the Page Needs Before Choosing a Format

The first decision is whether movement or interaction is needed at all. If an illustration is decorative, meaning it serves only an aesthetic purpose and provides no information or functionality ^[7], the case for animating it rests on brand or emphasis, not comprehension, and a static image is a legitimate result.

Reasons to select no animation

• The graphic carries meaning once. If the message is understood from one frame, a static graphic avoids a player, a fallback path and an update owner.
• The page already has a heavy first view. Core Web Vitals are assessed at the 75th percentile of page views (Source: web.dev), so a component that is slow for a quarter of visits matters even if it looks fine on a designer's machine.
• The platform restricts scripts. Some site builders limit custom code by plan or role (see the integration section).
• The motion would run longer than five seconds beside other content. That puts the component inside the scope of W3C's pause, stop, hide criterion and adds a control to build and test.
• No one will own it. A component with no update owner is a liability when the player or the page structure changes.

Write a storyboard and behavior map first

Before naming a format, write down five things: the initial state, the trigger (page load, scroll into view, hover, click or data change), the loop or end state, the reset behavior, and the fallback when the player fails to load. The same page should specify mobile behavior and the reduced-motion result. This sheet, not a file suffix, defines the work. A behavior that needs only a one-time reveal is a different purchase from a graphic that responds to user input.

Compare delivered video and runtime-driven graphics by behavior

Rendered video is linear: the buyer receives frames and the page plays them. Web.dev lists three traits a video must replicate to replace an animated GIF, namely autoplay, continuous loop and silent playback (Source: web.dev), and it advises providing more than one video format because not all browsers support WebM (Source: web.dev). A rendered video cannot respond to a user input by changing its internal state; it can only be played, paused or swapped. A runtime-driven graphic, by contrast, is drawn by a player from a vector or state-machine file, which is what permits reactions to a click or a data value.

Simple movement may need neither: MDN notes that CSS animations let the browser optimize performance and efficiency ^[8]. SVG loaded through an image element is restricted, because browsers place security restrictions on SVG used as an image ^[9] and external resources cannot be loaded unless inlined ^[9]. The practical consequence for a buyer is to specify whether the SVG is inlined or referenced as an image, because that choice changes what it may load and do.

Table 1 below summarizes how the main deliverable types differ for a buyer, without assuming that any one type is always smaller, faster or more accessible.

Table 1 is a list of questions, not a ranking. A video needs encoding and fallback decisions, while the two runtime formats also need a player supplied, versioned and placed on the page. A peer guide notes that older JSON-only Lottie players will not run state-machine logic shipped in a .lottie file (Source: charmotion.app), a concrete case of why a file suffix alone does not establish compatibility.

Purchase One: Editable Artwork, Master Files and Agreed Exports

The first purchase is the creative asset. Its acceptance evidence is a set of files, not a preview. The buyer should ask the designer to name, in writing, which file is the editable master, which files are exports, and which external assets (fonts, images, audio) each export depends on.

Master versus export

A Rive export and a Rive master are different files. Rive describes the .riv file as the final asset that ships in the product (Source: rive.app), and its documentation says that to save an editable copy the author must export separately (Source: rive.app). A buyer who receives only a .riv has a playable file but not an editable one. For Lottie work, the editable master is typically the authoring project, with the Lottie JSON or dotLottie file as the export; one studio's own service page, for example, states that it hands over the Lottie files and the After Effects project ^[13]. That is one provider's statement, not an industry norm, which is why it belongs in the quote sheet as a line to confirm.

Features, text and embedded assets

Lottie export does not carry every After Effects feature. LottieFiles states that Lottie does not support every After Effects feature ^[4], lists 3D layers, cameras and lights among items to avoid ^[4], and says that effects, text and similar features can work but depend on the player and should be tested before shipping ^[4]. The export panel exposes a setting to embed image assets in the JSON ^[14], and the dotLottie format documentation explains that historically images were stored as Base64 data URIs inside the JSON, significantly increasing file size ^[11].

The buyer-facing questions follow directly:

• Which authoring features does the artwork use? Ask for a list, and confirm each in the chosen player version rather than in the authoring preview.
• Is text live or outlined? Outlined text removes a font dependency but also editability, so the page must supply any text alternative.
• Are images embedded or linked? The answer changes payload, caching and the number of requests, and it must be recorded in the sheet.
• Is audio part of the scope? If so, a runtime step and an autoplay policy decision are added.

Fonts, licenses and ownership

Fonts used inside a delivered animation carry their own terms. Adobe states that fonts in its Font Folio are not licensed for web use ^[15], and Google states that each font has an associated license ^[16]. Neither source addresses Lottie or Rive specifically, so the sheet should ask the designer to list every font and its license source.

Ownership of source files is a contract matter. The US Copyright Office explains that a commissioned work that fails any of the stated requirements is not a work made for hire ^[17], and one requirement is a written agreement between the commissioning party and the creator ^[17]. The Office adds that it cannot provide legal advice about the status of a work ^[17]; a buyer should have a lawyer draft the clause.

Marketplace and community assets

If a designer starts from a library animation, the license is part of the quote. LottieFiles says free animations fall under its Lottie Simple License ^[18] and that modifications to files are deemed derivative works ^[19]. The question is which license governs the delivered, modified version.

What to ask the designer to price

• Artwork and animation master: the editable project and every linked asset.
• Agreed exports: each format, each size, each theme or state, with file names.
• Dependencies: fonts, images and audio, with licenses.
• Documentation: for interactive files, the state machine and input names. A peer guide advises checking that the delivered file documents its state machine and input names (Source: charmotion.app).
• Revisions: how many rounds and what counts as a change versus a new scope.

Purchase Two: Player, Runtime and Integration

The second purchase is the code that draws the file and the work that puts it on a page. It is usually quoted by a developer, not by the designer, and it is the most commonly unpriced gap.

The runtime is a separate dependency

Rive's web guide recommends the @rive-app/webgl2 package for most projects (Source: rive.app), while the canvas package uses the browser's 2D renderer and does not yet support every Editor feature (Source: rive.app). Rive's feature-support page states that certain features require the Rive Renderer at runtime (Source: rive.app). The WebGL packages are also subject to browser limits: Rive notes that browsers cap how many WebGL contexts a page can hold at once (Source: rive.app), which matters if a page carries several graphics.

For state machines, the web guide says that the state machine name must be supplied or the instance may only play the first linear animation it finds (Source: rive.app). Rive says to use data binding for new work (Source: rive.app). Rive also recommends staying on the latest runtime version for compatibility (Source: rive.app) and states that a feature added after a runtime's release may be skipped while the rest of the file continues to run (Source: rive.app). That last point is a maintenance obligation: the version that the designer tested is part of the deliverable.

For dotLottie, LottieFiles documents players for several web frameworks, and tells buyers to choose based on framework or platform, not feature set ^[20]. It lists state machines, theming and multi-animation support across players ^[20] and describes the players as MIT licensed ^[20]. The vendor's claim that every player is powered by ThorVG for identical output everywhere ^[20] is a vendor statement and is a reason to test on the target browsers, not a substitute for testing. The older lottie-web library offers svg, canvas and html renderers ^[21].

The Lottie specification site says the specification is a work in progress ^[22] and the community is a non-profit open source project hosted by the Linux Foundation ^[23], so the quote must name the player and version.

Security policy and graphics limits

WASM-based players interact with site security settings. MDN states that with a Content Security Policy that lacks the wasm-unsafe-eval source in script-src, WebAssembly is blocked from loading and executing on the page ^[24]. A strict policy therefore needs a developer decision before the component is accepted.

Rive documents self-hosting its WASM with a version warning: a mismatch between the WASM file and the installed package can break rendering at runtime (Source: rive.app). This is an implementation line item that needs an owner.

CMS and platform placement

Where the component lives decides who can maintain it. Platform documentation shows real differences, as of November 14, 2026:

• Webflow: a Lottie element accepts Lottie JSON or dotLottie files ^[25] and animations play as the page loads by default ^[25]. Custom code embeds require specific workspace or site plans ^[26], and Webflow support does not troubleshoot custom code ^[26].
• Shopify: generic files can be any file other than HTML but are intended for downloading by the customer ^[27]; trial plans can upload only a short list of formats ^[27]. Theme code editing is advised only with HTML and CSS knowledge ^[28], and app blocks let merchants add app content without editing theme code (Source: shopify.dev).
• WordPress: the LottieFiles plugin states that it does not support Elementor ^[29], and for users without the right capability WordPress removes disallowed markup when a post is saved ^[30].
• Wix: it supports Lottie URLs in the JSON format only ^[31] and warns that animations may look slightly different on a live site ^[31].
• Framer: a Rive plugin lets a .riv file be dragged in ^[32].

These statements describe documentation read on one date. The quote must name the target CMS, the plan and the person with permission to add scripts, and acceptance must run on the real page.

Loading, failure and layout

A component that fails to load must not break the page. Web.dev advises including width and height or reserving space so the browser can allocate the correct amount of space while media loads (Source: web.dev), and warns that removing reserved space can cause as much layout shift as inserting content (Source: web.dev). The buyer's checklist is therefore: reserved space, a failure state, a poster or static image, and a decision about whether the component is loaded eagerly or lazily.

Purchase Three: Page Behavior, Accessibility and Update Ownership

The third purchase is the documented behavior of the component on the actual page, with a named owner for later changes. It is the purchase most likely to be assumed and not written.

Pause, stop and reduced-motion behavior

W3C's Understanding document for success criterion 2.2.2, Pause, Stop, Hide, is labelled Level A ^[6]. It applies to moving, blinking or scrolling content that starts automatically, lasts more than five seconds, and is presented in parallel with other content ^[6]. The document includes an essential exception: an animation that occurs as part of a preload phase can be considered essential in the circumstances it describes ^[6]. Its example of a conforming mechanism is an animation with a "freeze animation" button ^[6]. Criterion 2.3.3, Animation from Interactions, is Level AAA ^[33], and its solutions include taking advantage of the reduce-motion feature of the user agent or operating system ^[33]. Separately, criterion 2.3.1 limits flashing to no more than three flashes in any one-second period unless the thresholds are met ^[34].

Technique C39 explains how CSS prefers-reduced-motion can disable motion triggered by user interactions in CSS ^[35]. It is an example technique: W3C states that content can satisfy WCAG even if it does not use the documented techniques ^[35]. MDN describes the media feature as detecting a device setting to minimize non-essential motion ^[36]. The feature reports a preference; it does not stop a player. Web.dev's older guidance says that for JavaScript animations the developer must listen for changes and stop the animation manually (Source: web.dev), and shows serving an animated image only when the preference allows, otherwise a static version (Source: web.dev).

Runtime vendors say the same thing in their own terms. Rive states that it does not automatically apply reduced motion (Source: rive.app), that it cannot decide which motion should be reduced (Source: rive.app), and documents building a Boolean property to choose which state machine path runs (Source: rive.app). For the dotLottie web player, the README describes pausing rendering when the canvas leaves the viewport ^[37]; the research for this report did not find an official statement that the player honors the reduced-motion preference automatically, so the buyer should require a tested result in the delivered player. No claim is made here that a browser setting implements reduced motion for a canvas or video runtime.

The commissioning sheet should therefore state, with the accessibility owner:

• Purpose: whether the motion is decorative or informative.
• Start and length: whether it starts automatically and whether it exceeds five seconds.
• Control: which pause or stop control applies.
• Reduced motion: the result in the actual player, tested.
• Fallback: what the static or error state shows. A video can use a poster image, which MDN suggests as a default when autoplay is not allowed ^[38].

This report does not promise conformance; whole-site conformance is a separate review.

Who owns changes after launch

Several documented facts imply continuing work:

• Runtime updates can change supported features, as noted above.
• Self-hosted WASM must match the package version.
• Cached files cannot be deleted from intermediate servers once stored with a long lifetime ^[39], so MDN recommends changing the URL with a version number or hash ^[39].
• Custom code faults: Webflow support does not troubleshoot custom code ^[26], which leaves a post-launch fault with the site owner or their developer.

The quote needs a separately priced line for player version updates, file replacement with cache-busting, page-structure changes (a new template or theme), and re-running the behavior table after each.

Pricing the Quote: What Public Sources Show and What They Do Not

The question "how much does website animation cost" has no single sourced answer, and the reason is structural. The three purchases are priced by different parties, on different bases, and the public price points that exist describe different things. This section reports what the opened sources state, with dates, and then gives a formula.

Labor-market context, not project prices

The US Bureau of Labor Statistics reports a median annual wage of $102,030 for special effects artists and animators in May 2025 ^[3], $92,650 for web developers ^[40] and $104,000 for web and digital interface designers ^[40], against $50,980 for all workers ^[40]. These are wages for employed occupations, not hourly billing rates or fixed project prices, and they do not include a supplier's overhead or margin. They are useful only to show that two distinct skill sets are involved.

Provider-stated data points

A freelancer listing on Dribbble states a fixed price starting from $180 per animation ^[1]; the listing describes buttons, icons and micro-interactions, and is one seller's offer, not a market rate. A talent platform reports an average hourly rate of $64 for motion graphics designers ^[2], described as based on real booking data from its network ^[2]; no sample size or date was shown on the page. Marketplace fees add to a quote and differ by marketplace: Fiverr states a buyer service fee of 5.5% of the purchase amount plus $3.50 on orders under $200 ^[41]. These are Fiverr's platform terms, not seller prices, and they do not describe the Dribbble listing above, which itemizes its own platform and processing fees.

No source opened for this report publishes a per-second rate for web animation. Divide-by-sixty conversions of per-minute video prices describe linear video production, not a Lottie or Rive component with states, fallbacks and integration, so this report does not derive a per-second figure. The motion-design cost per second a buyer should use is whatever the supplier quotes for the defined behavior table, expressed as the separately priced items below.

Supplier price models, compared on their own pages

Table 2 lists what each supplier's own current page states, retrieved on November 14, 2026. The rows are not equivalent deliverables: some price by hours, some by minimum spend, and some do not display a price. Prices are as displayed and may differ by billing period.

Table 2 shows three patterns:

• Animation is one discipline inside a larger budget. A buyer is buying hours or a minimum spend, not a priced component.
• Some suppliers separate design from code. Flocksy states design only, no code, and ManyPixels lists coding among items it does not do, so a second party is needed for purchase two.
• A specialist studio lists deliverables that map onto purchase one and part of purchase three. Where a request exceeds a general subscription's stated scope, a specialist is the sound choice.

Tool and license costs

Authoring and hosting subscriptions are separate from production. Rive's pricing page displays $9 per seat per month for its Cadet plan (Source: rive.app) and $32 for Voyager (Source: rive.app) on the capture date; the page has a billing toggle, so the period was not confirmed. Rive states that free exports play a splash screen (Source: rive.app), that there are no royalties, revenue share or runtime fees on what you ship (Source: rive.app), and that companies with more than $10 million in annual gross revenue use its Enterprise plan (Source: rive.app), a condition an agency should check for the client. LottieFiles displays $19.99 per user per month for its Individual plan ^[52] and $24.99 for Team ^[52], billed annually. Whether the buyer or the supplier holds these licenses is a line item.

Evidence Limits and Measurement Protocol

The evidence base for a defensible quote is mostly documentary. It has three parts: what is unavailable, how to measure, and how to total a quote.

Quantities that are not available. There is no neutral benchmark for file size, speed or memory across Lottie, dotLottie, Rive and video in the sources opened. No original benchmark was run for this report, so no numeric performance comparison is published. Vendor size claims exist but were not adopted.

Measurement protocol for the buyer. If payload is measured later, the record should separate first load from repeat load and include the animation file, the player, the WASM, linked fonts and images, and the compression and cache state. MDN states that transferSize is the response body size plus a fixed value standing in for headers ^[53] and is 0 when a resource is served from a local cache ^[53], and that decodedBodySize measures the body after removing content encoding ^[54]. A repeat visit can therefore show zero transfer without showing equal rendering cost. Transfer size is not memory usage, render speed or conversion uplift, and a peer guide recommends measuring the runtime plus the actual files on the actual pages before deciding (Source: charmotion.app). The test record should note browser, device, network and versions.

Quoted project cost. The reference calculation for comparing quotes is:

Quoted project cost = separately priced art and animation + implementation + agreed quality assurance (QA) + confirmed licenses, hosting and player-related fees + separately quoted continuing changes.

No hours or per-animation fee is assumed in this formula. A quote that omits one term has not been priced; it has only left the term to the buyer.

The Quote Sheet and Behavior Table

The reference asset is a short quote sheet with a matching behavior table. Each line carries an acceptance criterion that someone can observe. Use one sheet per component, and test one representative component on the target page before extending to a full set.

Blank quote sheet

Table 3 is the blank quote sheet. Each row is one of the three purchases or a continuing item.

Table 3 is wide because each column forces a decision that otherwise stays implicit. "Format and actual player version" holds the compatibility claim, and "Update owner" turns the continuing-change obligation into a name.

Blank behavior table

Table 4 is the behavior sheet, one row per state or trigger.

The observed-evidence column is filled in by the tester, not the supplier, and should record the browser, device, network and versions. A good-looking preview in an authoring tool is not evidence of a working component; the evidence is the observed behavior on the target page with existing page scripts running.

Hypothetical completed example

(Hypothetical Example) A software company wants a product-onboarding diagram on a pricing page, with a one-time reveal on scroll and a highlighted step on click. Amounts are left as placeholders on purpose.

The hypothetical shows how the same component can be accepted in parts: the designer on files, the developer on the page, and the accessibility owner on the reduced-motion and fallback rows.

Implications and Future Directions

For a buyer, the implication is procedural: ask each supplier for a written scope against the same sheet, so equal scopes can be compared. A supplier who declines to price purchase two or three has shown that someone else must. Subscriptions suit steady output of artwork and ordinary web work; a single interactive build with state machines, a strict security policy or a complex CMS fits a specialist better. The publisher of this guide is a flat-rate subscription and, by its own positioning, not the right fit for a single one-off job.

Three developments are worth tracking. First, dotLottie state machines mean the claim that Lottie has no interactivity is outdated. Second, Rive states that runtimes may expose a built-in reduced motion value in the future (Source: rive.app), and for now the preference must be passed into the file. Third, platform plan restrictions and supported file types change and should be rechecked.

Frequently Asked Questions (FAQs)

How much does website animation cost? The sources opened publish no single price. They show a freelancer listing from $180 per animation ^[1], supplier minimums on their own pages (Table 2) and BLS wage context ^[3]. Ask for the quoted project cost formula above.

How much does a Lottie animation cost, and what is motion design cost per second? The only per-animation figure found is one seller's listing ^[1]; no authoritative per-second source was found. Integration and testing are not in that listing, so request a quote against the behavior table.

Rive or Lottie for websites? It depends on the authoring pipeline and features: Lottie plays After Effects exports and Rive uses its own editor, and both can now carry state machines. Test the agreed features in the agreed player version.

Animated SVG, Lottie or CSS animation? CSS suits simple movement ^[8]; SVG used as an image has restrictions ^[9]; Lottie and Rive suit authored multi-step motion that needs a player.

How can a buyer integrate a Lottie animation and hire a web animator? Name the player, version and placement route, and check platform and plan limits. Ask for a portfolio showing the target behavior ^[3], a written list of masters and exports, and a named update owner.

What should a quote include? The rows of Table 3 and the behavior table, with exclusions stated.

Conclusion

Website animation is best commissioned as three accepted purchases: an editable master with agreed exports, a compatible player with its integration, and a documented page behavior with a named owner for later changes. The evidence supports no blanket format verdict and no public per-second or per-animation price. It supports a method: write the behavior map first, price each purchase separately, name the player and version, define the reduced-motion and failure results with the accessibility owner, and test one representative component on the real page. A static image or rendered video is a valid result when it meets the behavior table, and a specialist is the right supplier when the behavior exceeds a general subscription's scope. Each purchase then has an accepted artifact: files for the designer, an observed page for the developer, and a tested fallback for the accessibility owner. Prices, plan restrictions and platform support in this report are as of November 14, 2026, and should be reconfirmed before purchase. To discuss a subscription-based design and web workflow, see Tapflare.