\n`; navigator.clipboard.writeText(code); }; // Simple Lottie-like demo renderer (shows metadata + placeholder) const demoUrl=json?URL.createObjectURL(new Blob([JSON.stringify(json)],{type:'application/json'})):null; return React.createElement('div',{style:{background:'#0B0D17',color:'#fff',fontFamily:'var(--font-body)'}}, React.createElement('header',{style:{padding:'14px 20px',display:'flex',alignItems:'center',borderBottom:'1px solid rgba(255,255,255,0.05)',background:'rgba(10,10,15,0.95)',position:'sticky',top:0,zIndex:50}}, React.createElement('div',{style:{display:'flex',alignItems:'center',gap:10}}, React.createElement('a',{href:'/',style:{textDecoration:'none',display:'flex',alignItems:'center',gap:10}}, React.createElement('div',{style:{width:30,height:30,borderRadius:8,background:ACCENT,display:'flex',alignItems:'center',justifyContent:'center',fontSize:13}},'⚡'), React.createElement('span',{style:{fontFamily:'var(--font-display)',fontWeight:800,fontSize:16,color:'rgba(255,255,255,0.5)'}},'Ultimate Design Tools')), React.createElement('span',{style:{color:'rgba(255,255,255,0.2)',fontSize:14}},'/'), React.createElement('h1',{style:{fontWeight:600,fontSize:14,margin:0}},TOOL_TITLE))), React.createElement('nav',{style:{padding:'8px 24px',fontSize:13,color:'rgba(255,255,255,0.4)',borderBottom:'1px solid rgba(255,255,255,0.04)',background:'rgba(255,255,255,0.01)'}}, React.createElement('a',{href:'/',style:{color:'rgba(255,255,255,0.5)',textDecoration:'none'}},'Home'), React.createElement('span',{style:{margin:'0 8px',opacity:0.4}},'/'), React.createElement('a',{href:'/#tools',style:{color:'rgba(255,255,255,0.5)',textDecoration:'none'}},'Tools'), React.createElement('span',{style:{margin:'0 8px',opacity:0.4}},'/'), React.createElement('span',{style:{color:'rgba(255,255,255,0.7)'}},TOOL_TITLE)), React.createElement('div',{style:{maxWidth:700,margin:'0 auto',padding:'24px 16px'}}, // Upload area !json&&React.createElement('div',{style:{border:'2px dashed rgba(255,255,255,0.1)',borderRadius:16,padding:'48px 24px',textAlign:'center',marginBottom:24}}, React.createElement('div',{style:{fontSize:48,marginBottom:16}},'🎬'), React.createElement('div',{style:{fontSize:16,fontWeight:600,color:'rgba(255,255,255,0.7)',marginBottom:8}},'Drop a Lottie JSON file here'), React.createElement('div',{style:{fontSize:13,color:'rgba(255,255,255,0.4)',marginBottom:16}},'or click to browse · supports .json Lottie files'), React.createElement('input',{type:'file',accept:'.json',onChange:handleFile,style:{display:'none'},id:'lottie-upload'}), React.createElement('div',{style:{display:'flex',gap:8,justifyContent:'center'}}, React.createElement('label',{htmlFor:'lottie-upload',style:{padding:'10px 24px',borderRadius:10,fontSize:13,fontWeight:600,cursor:'pointer',background:ACCENT,color:'#0B0D17'}},'Choose File'), React.createElement('button',{onClick:handlePaste,style:{padding:'10px 24px',borderRadius:10,fontSize:13,fontWeight:600,border:'none',cursor:'pointer',background:'rgba(255,255,255,0.06)',color:'rgba(255,255,255,0.6)',border:'1px solid rgba(255,255,255,0.1)'}},'Paste JSON'))), // Player json&&React.createElement('div',null, // Preview area with lottie-player web component React.createElement('div',{style:{background:bg,borderRadius:16,border:'1px solid rgba(255,255,255,0.06)',overflow:'hidden',marginBottom:16,display:'flex',justifyContent:'center',alignItems:'center',minHeight:300}}, React.createElement('div',{dangerouslySetInnerHTML:{__html:`

Related Tools

View all 216 →
SVG Animator
Try free →
CSS Animation Generator
Try free →
Easing Wizard
Try free →
Image Optimizer
Try free →
SVG Optimizer
Try free →
Favicon Generator
Try free →

What Is a Lottie Animation Player?

A Lottie animation player lets you preview, inspect, and test Lottie JSON animation files in your browser. Lottie is a lightweight animation format created by Airbnb that renders After Effects animations in real time on web and mobile. This tool lets you drag in a .json file, control playback speed, loop settings, and frame range — without writing any code.

Why Lottie Over GIF or Video?

Lottie animations are vector-based, so they scale to any resolution without pixelation. A typical Lottie file is 10-20x smaller than an equivalent GIF. They support interactive playback — play, pause, reverse, and scrub to any frame. And unlike video, Lottie animations can have transparent backgrounds, making them perfect for UI overlays, loading spinners, and micro-interactions.

How to Use This Tool

  1. Load your animation — Drag and drop a Lottie .json file onto the player, or paste a URL to a hosted animation.
  2. Preview the animation — The animation plays immediately. Use the timeline scrubber to jump to any frame.
  3. Adjust playback settings — Control speed (0.5x, 1x, 2x), toggle looping, and set the direction (forward or reverse).
  4. Inspect animation details — View metadata like frame count, duration, dimensions, and layer count to understand the animation structure.

Tips and Best Practices

Frequently Asked Questions

What file format does this support?+
This player supports Lottie JSON files (.json). These are typically exported from After Effects using the Bodymovin plugin, or created with tools like Lottie Creator, Haiku Animator, or LottieFiles.
Can I edit the animation here?+
This is a preview and inspection tool — you can control playback but not edit keyframes or layers. For editing, use After Effects with the Bodymovin plugin, or LottieFiles' web editor.
Are Lottie animations supported in all browsers?+
Yes — the lottie-web library (which this player uses) works in all modern browsers. For native mobile apps, Lottie has official libraries for iOS (lottie-ios) and Android (lottie-android).
How do I add a Lottie animation to my website?+
Include the lottie-web library via CDN, then use lottie.loadAnimation() with your JSON file. React developers can use the lottie-react package for a component-based approach.
What makes a Lottie file too large?+
Complex vector paths, many layers, and high frame counts increase file size. Simplify paths in After Effects, reduce keyframes, and avoid raster images embedded in the animation.
Can Lottie animations be interactive?+
Yes — the Lottie API supports play, pause, stop, setSpeed, goToAndStop, and event listeners. You can trigger animations on scroll, click, hover, or any JavaScript event.

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service