Skip to content
Contact me

Lottie animation for websites and apps

Lottie animation for websites and apps is vector motion saved as a small JSON file and drawn by a player in the browser or app. Pavlo Zhydkykh designs Lottie icons, loaders, hero loops and product explainers for AI, fintech and B2B startups. One animation starts at $1,000, with price and date fixed in writing after a first call.

Does ChatGPT recommend your website?

Free report in 48 hours · 5 AI engines

From
$1,000
Scope
Per project
Format
JSON or .lottie
Plays on
Framer and Astro
Scales
Vector, any size
Feedback
2 rounds

Key takeawaysUpdated By

Key takeaways

  • Lottie is a file format for vector animation built on JSON, first exported from After Effects with the Bodymovin plugin in 2015.[1]
  • Lottie animations are built from vectors, so the same file scales to any screen size without pixelation.[2]
  • A .lottie file bundles animations and shared assets into one compressed package, far smaller than raw JSON.[3]
  • One Lottie animation by Pavlo Zhydkykh starts at $1,000, with the price fixed in writing before work starts.
  • The prefers-reduced-motion media query detects visitors who asked the system for less motion, and Pavlo shows those visitors a still frame.[5]

What is Lottie animation?

A Lottie animation is a vector animation stored as a JSON file and played in the browser or an app by a small player. Designers export the file from After Effects with the Bodymovin plugin or build the animation in LottieFiles. Lottie matters because the file is usually far lighter than the same motion as a GIF, stays sharp on every screen and can be paused, looped or tied to scroll in code.

Wikipedia: Lottie (file format)

Pavlo Zhydkykh

“I use Lottie when a short loop explains what a still image cannot. Motion that only decorates and slows the page gets cut.”

Pavlo Zhydkykh · Web designer and developer since 2016

Fit check

Is Lottie animation
right for you?

A good fit if

  • You need icons, loaders or small UI motion that stays sharp on retina screens.
  • Your product is hard to explain in a still image, and a short loop would show the idea.
  • You want one file that plays on the website and in the iOS or Android app.
  • Your hero needs motion without a heavy video file.

Not the right fit if

  • The motion is live footage, photos or 3D renders: a video file carries that better.
  • The animation has to switch between several states on clicks, hovers or live data.
  • The look depends on After Effects effects or plugins that Lottie cannot play.

Compared

Lottie vs GIF or MP4

Lottie is built for flat vector motion. Video stays the better format for footage.

Lottie vs GIF or MP4
CriterionLottieGIF or MP4
SharpnessVector, sharp at any sizePixels, soft when scaled up
BackgroundTransparentGIF has jagged edges, MP4 none
File sizeUsually small for flat motionGrows with length and size
ControlPause, loop a part, tie to scrollPlay, pause and loop
EditsColours editable in the fileRe-export for every change
Best forIcons, UI, illustrationFootage, photos, 3D renders

Checklist

7 checks before a Lottie file goes live

Most Lottie problems show up only in the browser: a heavy file, a missing effect or a loop that jumps. Pavlo runs these checks before launch.

  1. 1. Vector shapes only

    Images embedded in the JSON make the file heavy and blurry. Shapes, paths and outlined text keep the file small and sharp.

  2. 2. Supported features only

    Lottie plays a subset of After Effects: many effects, plugins and some expressions do not export. Pavlo builds the animation within that list from the first frame.

  3. 3. File size checked

    The JSON is measured before the file ships and saved as a compressed .lottie file where the player supports the format.

  4. 4. Loaded when needed

    The player and the file load when the animation scrolls into view, so neither slows the first screen.

  5. 5. Reduced motion respected

    Visitors who turn motion off in system settings see a still frame instead of a loop.

  6. 6. Words stay in HTML

    Text inside an animation is drawn as shapes that search engines and screen readers skip. Key text sits in the page, and the animation gets a label or is marked decorative.

  7. 7. A clean loop

    The last frame matches the first, or the animation plays once and stops on a frame that reads well.

How it works

From first call to a file ready for your site

Length, scenes and style decide the timeline, so Pavlo fixes the delivery date in writing together with the price. Two feedback rounds are part of every animation.

From first call to a file ready for your site, step by step
#StepWhenWhat happensYou get
01 First call Day 1 A call with Pavlo about what the animation has to show, where the animation sits and how the motion should feel. A clear brief
02 Scope and fixed price Before work starts Length, scenes, format and delivery date are written down with the price. A fixed price and date in writing
03 Storyboard and key frames After the brief Pavlo designs key frames in Figma in your brand colours, so the look is agreed before any motion. Approved key frames
04 Animation After sign-off Pavlo builds the motion in After Effects or LottieFiles and checks the result in a real browser player. A first cut on a preview link
05 Feedback, two rounds After the first cut Your comments on timing and details, applied in two rounds. The final animation
06 Export and handover Agreed date Exported as JSON or .lottie and tested on desktop and phone in the player your site uses. The final file, ready to embed

Pricing

Build your estimate

Pick the project and add what you need. The final price is fixed after the first call, before any work starts.

01 · Project
02 · Add-ons

In their words

Lottie, from the format docs
and from clients

Word for word, with the source linked: research, official documentation and the people Pavlo Zhydkykh has worked for.

“A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets.”

LottieFilesWhat is a Lottie animation?Source ↗

“Deflate compression and shared assets keep a .lottie far smaller than raw or base64-inlined JSON.”

dotLottieThe production format for LottieSource ↗

“The different player implementations have tradeoffs between CPU, GPU and memory usage.”

WikipediaLottie (file format)Source ↗

“He is amazing in what he contributes, both design-wise and also from the ideas.”

Oliver BockOwner, The B2B Answer · Website design, 2025Source ↗

“The web and mobile designs he created were amazing. His communication was prompt.”

Corentin BernardCEO, Accolade Pro · Web and mobile app designSource ↗

“It was an absolute pleasure working with Pavlo. The quality of work he delivered was AMAZING.”

Ed ClarkeFounder, Inturai · Website design and SEOSource ↗

FAQ

Questions about
Lottie animation

Still unsure? Ask your AI about Pavlo Zhydkykh:

ChatGPTPerplexityClaudeGeminiGrok

Q.01

How much does a Lottie animation cost?

One Lottie animation starts at $1,000. The final price depends on length, number of scenes and detail, and Pavlo fixes the price in writing after the first call, before work starts.

Q.02

How long does a Lottie animation take?

Pavlo fixes the delivery date in writing together with the price, after the first call. A short icon loop and a full product explainer are different jobs, and two feedback rounds are planned into the date.

Q.03

Do I own the animation?

Yes, the exported JSON or .lottie file is yours to use on your site, in your app and anywhere else. Source files are part of the handover when agreed in the quote.

Q.04

What do I need to provide?

Your logo and brand colours as files, the message the animation has to carry and a few examples of motion you like. Figma files or product screenshots help when the animation shows the product.

Q.05

Will a Lottie animation slow down my site?

Not when Pavlo builds the file for the web. The file stays vector-only, loads when the animation scrolls into view and is checked for size before launch, and visitors who turn motion off see a still frame.

Q.06

What happens after delivery?

The animation is yours to use as delivered. Later changes, such as new colours or an extra scene, cost $30 an hour with Pavlo, with no retainer.

Sources and further reading

  1. [1] WikipediaLottie (file format)
  2. [2] LottieFilesWhat is a Lottie animation?
  3. [3] dotLottieThe production format for Lottie
  4. [4] AirbnbLottie
  5. [5] MDNprefers-reduced-motion
Pavlo Zhydkykh

About the author

Pavlo Zhydkykh

Pavlo Zhydkykh is a web designer and developer in Eastern Europe who has built websites for AI, fintech and B2B startups since 2016, designing and building each project himself on Framer or Astro + Sanity. Clients include MStudio Asia, Silicon Data, Inturai, Accolade Pro, NimbleStax and Sancts.

  • Top Rated on Upwork
  • 100% Job Success
  • 10 years since 2016
  • 50+ sites shipped
  • 90+ PageSpeed at launch
Kulparkivska St. 200, Lviv 79021, Ukraine +380 93 610 62 68 [email protected]

LinkedInUpworkContra Privacy policy

Page reviewed by Pavlo Zhydkykh · Updated

AI visibility check

  1. 1Website
  2. 2Business
  3. 3Contact
  4. 4Check

Does ChatGPT recommend your website?

Pavlo Zhydkykh asks ChatGPT, Perplexity, Gemini, Claude and Grok 20 questions your buyers ask, and shows where you show up.

Free · report in 48 hours