Lottie Web Player - Lottiefiles

Web Player Lottie to dotLottie SVG to Lottie Lottie to GIF Lottie Optimizer Lottie Editor JSON Editor Interactivity Guide

Generate Code

Your Lottie JSON URL: (host your json files via lottiefiles.com/preview)

Play mode

Direction

Background Color

Width (Pixels / Percent)

Height (Pixels / Percent)

Animation Speed (1x)

Controls

Display Animation Controls: 
Play, Pause & Slider

Autoplay

Play animation on load.

Hover

Play animation on hover.

Loop

Set to repeat animation.

PREVIEW

GENERATED CODE

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>
<lottie-player src="{{lottie_url}}" mode="{{play_mode}}" background="{{background_color}}"  speed="{{options_speed}}"  style="width: {{width}}; height: {{height}};" hover loop controls autoplay></lottie-player>

Advanced Customizations

Customise Player

Property	Options	Description
src	URL	Link of JSON file.
autoplay	true	Autoplay the animation on load
playmode	normal / bounce	Autoplay the animation on load
direction	forward	Direction of the animation
background	transparent	Background Color
speed	1	Speed of animation. 1 is Default
controls	true	Show animation controls such as play, seeker, etc.
style		--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Helvetica Neue", sans-serif; --font-size: 13px; --text-color: #555; --toolbar-height: 35px; --toolbar-background-color: transparent; --toolbar-icon-color: #999; --toolbar-icon-hover-color: #222; --toolbar-icon-active-color: #555; --drawer-background-color: #FFF; --seeker-track-color: #CCC; --seeker-thumb-color: rgba(0, 107, 120, 0.8);

Why we built this

We built this player to make implementing a Lottie animation on the web super easy. We built this on top of the opensourced Lottie-web to give more power to the design and animation community.

We welcome your contributions.

GitHub

Find Lottie Animations

LottieFiles is now the largest repository of high quality Lottie animations, unique set of tools for testing and editing Lottie and the largest community of designers, engineers and animators.

Explore free animations

Spread the word

Motion made simple.

Embed Lottie animations on your website.

A powerful web player for Wordpress, Shopify, Webflow, Squarespace, Wix or any Website. Implement Lottie animations on a website in just a few clicks.

Generate Code

Customise Player

Why we built this

Find Lottie Animations

Spread the word

Push your animation game to the next level.