Best Lottie and Web Animators

What a good Lottie animation package includes

Check that the offer clearly states:

• Number of animations and their length.
• Formats: Lottie JSON, dotLottie, GIF or video.
• File size targets.
• Platform testing for web, iOS or Android.
• Source project files.
• Loops and segments for interactions.
• Revisions and delivery time.

Ask for a test link or preview in a Lottie player before final delivery. It shows quickly whether everything plays correctly and how large the file is.

Ask to see the animator's previous Lottie files running in a real app or website, not only as video previews. A video can hide problems with unsupported effects or heavy files that only show up when the animation plays in a browser or on a phone.

How to brief a Lottie animator

1. Where the animation appears and its size on screen.
2. Platforms: web, iOS, Android.
3. What it should show or explain.
4. Design files or illustrations to animate.
5. Brand colors and style.
6. Interaction: loop, play once, hover or scroll.
7. Deadline.

Provide vector design files, such as from Figma or Illustrator, if you have them. Animating clean vector shapes keeps files small and makes the result match your design system.

Involve your developer early. They can confirm which library will play the files, how interactions will be triggered and what file size is acceptable. This avoids building something that looks great but cannot be used.

Agree on how animations should behave when they finish or are interrupted. Should a loading animation loop until data arrives, or stop on a final frame? Clear rules for start, loop and end states help the animator build segments your developer can control easily.

What drives the price

• number and length of animations
• illustration work needed
• complexity of motion
• interactive segments
• testing on several platforms
• source files and extra formats

Animating a few simple icons costs much less than a full onboarding sequence with custom illustrations and interactive steps.

Red flags

• Uses effects that Lottie does not support.
• Large files with embedded images.
• No preview in a real Lottie player.
• No source project files.
• No experience with app or web use.

Keep animations short and purposeful. Motion should help people understand what is happening, not slow them down or distract from the task.

For the design itself, see our UX design guide and icon design guide. For video-style animation, read our animated GIF guide.

Before launch, check the animations on a slower phone and with reduced-motion settings turned on. Smooth playback on older devices and a calm fallback for people who prefer less motion make your product feel polished and considerate.

Quick pre-order checklist

• I know where and how big the animation will be.
• My developer confirmed the player and size limit.
• I sent vector design files.
• I will see a preview in a Lottie player.
• I will get the source files.