Custom Lottie Animation
for Websites, Apps & Product UI

A Lottie animation is a vector animation saved as a small JSON file that a lightweight open-source player renders live inside a website or app. Instead of storing pixels frame by frame like a video or GIF, the file describes shapes, colours, and how they move over time. That is why a Lottie stays sharp at any screen size, can be recoloured in code, and usually weighs a fraction of the same animation exported as MP4 or GIF.

Most Lottie animations built from vector shapes are between 2KB and 50KB. A logo animation, animated icon, or loader typically sits at the low end of that range, while a full-screen illustrated sequence can reach 200–500KB. File size rises sharply when raster images are embedded or when heavy masks and effects are used, so we agree a file weight budget for each asset before design starts and build to it.

Lottie JSON and dotLottie contain the same animation, but dotLottie (.lottie) is a compressed ZIP container that is usually much smaller and can bundle images, multiple animations, and colour themes in one file. Plain Lottie JSON works with the widest range of existing players and tools, while dotLottie needs the dotLottie player. We deliver whichever format your stack uses, or both.

A well-built Lottie animation is far lighter than the video or GIF it replaces, so it usually improves page weight rather than hurting it. The bigger cost is the player library, which is a one-time download shared by every animation on the page. To protect Core Web Vitals, set a fixed width and height so the animation cannot cause layout shift, lazy-load animations below the fold, and keep masks and effects light so the animation doesn't tie up the main thread on low-end phones.

Developers need one small open-source player library, chosen by platform. On the web that is lottie-web or a wrapper such as lottie-react; native apps use lottie-ios or lottie-android; dotLottie files use the dotLottie player, which has web, iOS, Android, and Flutter versions. Each installs with a single package command, and our handoff note names the exact library and includes the few lines of code needed to mount and control the animation.

Yes. Webflow and Framer support Lottie files natively, WordPress plays them through a Lottie plugin or a short embed, and Shopify themes can load them with a small snippet in the theme code. In every case you upload the JSON or .lottie file like any other asset. Tell us your platform at the start and we will export in the format it handles best.

Yes, a Lottie animation can be recoloured at runtime if its colours are set up as named, editable properties rather than baked into the artwork. Your developers then pass in new colour values for dark mode, a theme switch, or a white-label client. We used this for HyperVerge's KYC SDK — one set of .lottie files takes on each bank's brand colour from a single hex code passed when the SDK starts.

No, a video or GIF cannot be converted directly into a usable Lottie animation, because Lottie is a vector format and cannot hold live footage, photos, or complex raster effects. Tools that claim to convert simply embed the video frames as images, which produces a file heavier than the original. The right approach is to rebuild the key moments as vector animation in After Effects, using your existing video as the style reference.

Use Rive instead of Lottie when the animation has to react to user input on its own — for example a toggle with hover, pressed, and on states, an animated navigation bar, or a character that responds to the user. Lottie plays a timeline that your code controls, which suits anything that plays start to finish, such as loaders, logos, icons, and onboarding. Most products need Lottie for the bulk of their animations and Rive for the few that must respond.

Custom Lottie animation is priced per asset and by complexity, not by duration. A set of simple animated icons, a single loader, and a full-screen illustrated hero sequence are very different amounts of work even if each runs only three seconds. The fastest way to an accurate number is to send the screens or a short brief — we reply with a fixed quote within 4 working hours.