--- title: "How to use Lottie animations and HTML graphics in DaVinci Resolve 21" author: "Cutsio Team" date: "2026-05-15" lastmod: "2026-05-15" category: "DaVinci Resolve Advanced Workflows" excerpt: "DaVinci Resolve 21 adds native support for Lottie animations and OGraf HTML graphics. Drag .json and .lottie files directly into your timeline with alpha channel support." tags: ["DaVinci Resolve 21","Lottie","Animation","Motion Graphics","HTML Graphics","After Effects","Title Design"] --- ## How do you use Lottie animations in DaVinci Resolve 21? DaVinci Resolve 21 adds native support for Lottie animations and OGraf HTML graphics. You can drag .json and .lottie files directly into the media pool, where they are treated like fully rendered animation clips. Alpha channels are recognized automatically, allowing you to layer graphics and titles over video tracks without manual compositing. ![Lottie Support](https://images.blackmagicdesign.com/images/products/davinciresolve/whatsnew/edit/lottie@2x.jpg?_v=1775111047) Lottie is a widely used file format for lightweight vector animations created in Adobe After Effects via the Bodymovin plugin, or in dedicated tools like Haiku Animator, LottieFiles, and LottieLab. Before Resolve 21, incorporating Lottie animations required rendering them as ProRes files with alpha channels. This meant larger file sizes, longer render times, and more iterations when the client requested changes. Native support eliminates all of that. Drop a .json file onto your timeline, and it renders instantly with a transparent background. The animation is resolution-independent, so it scales cleanly to any frame size. Need to change the animation? Update the .json file in your animation tool, re-save, and Resolve refreshes the clip automatically. The entire workflow is non-destructive and dramatically faster than the render-and-import cycle. ## Where can you use Lottie animations in your Resolve 21 timeline? Lottie animations behave like video clips with alpha channels. You can place them on any video track above your background footage, trim them to any duration, and apply standard transform, crop, and blend mode controls. Common use cases include: - **Lower-third titles**: Animated name plates and title bars that fade in with motion - **Logo reveals**: Brand logos with built-in animation that play at the start or end of content - **Animated icons**: Social media icons, call-to-action buttons, and notification badges - **Transition elements**: Animated shapes and wipes that bridge between scenes - **Data visualizations**: Animated charts, graphs, and progress indicators for explainer content The animations are vector-based, meaning they stay sharp at any resolution. A Lottie animation designed for HD will look equally clean on a 4K timeline because the vector shapes scale without pixelation. ## What is OGraf HTML graphics support in DaVinci Resolve 21? OGraf HTML graphics support allows you to use HTML, CSS, and JavaScript-based motion graphics directly in the timeline. This opens up web-based animation workflows where graphics are built with standard web technologies rather than traditional animation tools. OGraf graphics are particularly useful for: - **Data-driven graphics**: Graphics that pull live data from APIs and render it as animated text or charts - **Web-based templates**: Pre-designed HTML graphics that can be customized with CSS variables - **Interactive prototypes**: Motion designs created in web-based tools that can be layered directly into video The HTML graphics are rendered by Resolve's built-in web engine, which means they work offline and do not require an internet connection. Like Lottie files, they support alpha channels and can be layered over video content. ## How does the Lottie workflow compare to traditional motion graphics in Resolve? | Method | File size | Editability | Performance | Best for | |---|---|---|---|---| | Lottie .json | Very small (KB) | Edit in external tool, auto-refresh | Excellent | Icons, logos, simple animations | | ProRes with alpha | Large (MB-GB) | Re-render for changes | Good | Complex animations | | Fusion native | Project-based | Full control in Resolve | Depends on node count | Custom compositing | | HTML/OGraf | Small (KB) | CSS/JS based | Good | Data-driven, web-native graphics | For editors who regularly use motion graphics from designers working in After Effects or dedicated animation tools, Lottie support eliminates the most common bottleneck in the handoff: file size and iteration speed. A designer can export a Lottie file, the editor drops it into the timeline, and if the client asks for changes, the designer updates the source file and the editor refreshes without re-importing. ## Can you combine Lottie animations with Resolve 21 keyframing tools? Yes. Since Lottie animations are timeline clips, you can apply Resolve's transform controls to them just like any other clip. Scale, rotate, position, and opacity can all be keyframed to create custom animation on top of the Lottie's built-in motion. The new keyframing tools in Resolve 21 — ease animations, loop modes, ping pong, and relative mode — work on Lottie clips as well. If you have a Lottie icon that needs to bounce continuously, set keyframes on the scale parameter, apply ping pong mode, and the animation loops automatically without duplicating keyframes. This combination of pre-built Lottie motion and Resolve keyframing gives you significant creative flexibility without building complex Fusion node trees.
Cutsio

Focus on the edit. Graphics handle themselves.

Pre-edit your timeline with Cutsio first — silence removal, retake detection, highlight selection. Then drop in Lottie graphics and animate with the new keyframing tools. Your original media stays untouched.

Try Cutsio Free

No credit card. 60 mins free.

## FAQ ### What Lottie file formats does DaVinci Resolve 21 support? Resolve supports both .json (standard Lottie) and .lottie (compressed Lottie) file formats. ### Do Lottie animations support audio tracks? No. Lottie is a purely visual animation format. Audio must be added separately as an audio clip on the timeline. ### Can I edit a Lottie animation inside DaVinci Resolve? No. Lottie animations are generated in external tools. However, changes to the source .json file are reflected in Resolve when the file is updated. ### Does OGraf HTML graphics support JavaScript interactivity? OGraf HTML graphics support HTML and CSS for rendering. JavaScript support may be limited compared to a full web browser environment. ### Are Lottie and OGraf support available in the free version of Resolve 21? Yes. Native Lottie and OGraf HTML graphics support is available in both the free and Studio versions of DaVinci Resolve 21.

Faster edits, richer graphics

Pre-edit your timeline with Cutsio, add Lottie animations and styled titles in Resolve 21, and deliver faster. Your original camera files stay untouched.

Try Cutsio Free

No credit card required. 60 minutes of free processing.