You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewLottie Hover Icon Button — Free Inline-JSON Lottie Snippet
Lottie Hover Icon Button · Buttons · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Lottie Hover Icon Button — Play/Reverse on Hover With Inline Animation Data
Lottie plays back animations exported from After Effects (via the Bodymovin plugin) or built directly as JSON, and lottie-web is the runtime that renders that JSON to SVG, canvas, or HTML in the browser. The classic use is a button icon that plays a short flourish on hover — a heart filling in, a bell ringing, a star sparkling — driven by lottie.loadAnimation with autoplay: false and play()/setDirection() calls on mouseenter/mouseleave. This snippet builds exactly that, but since a live sandbox has no server to host a .json asset on, the Lottie data is a small hand-built object passed directly as animationData, so the button always works standalone with zero network requests.
A real, minimal Lottie document
heartAnimation is a genuine Lottie JSON structure — v (format version), fr/ip/op (frame rate and in/out points), and a single shape layer with keyframed s (scale) and a fill c (color) that shift over 40 frames. It's deliberately small (one layer, two keyframed properties) but it's not a mock — lottie.loadAnimation parses and renders it exactly as it would a much larger exported file, which is why this pattern is worth knowing: any time you need a Lottie animation that must never depend on an external asset load, hand-authoring or generating a minimal JSON document and passing it via animationData is the way to guarantee that.
Play forward, reverse back
autoplay: false means nothing happens until you interact. On mouseenter, setDirection(1) then play() runs the animation forward from wherever it currently is; on mouseleave, setDirection(-1) then play() runs it backward to the start. Because Lottie tracks the current frame internally, rapidly hovering on and off reverses smoothly from the interrupted frame rather than snapping or replaying from zero.
Why not autoplay + loop?
A looping hover icon can feel busy on a button that's meant to communicate a single action. This snippet uses loop: false with the play/reverse pattern so the icon settles at a clear "off" state and a clear "hovered" state — a better fit for buttons than for a standalone decorative animation like a loading indicator.
Where this fits
For the equivalent asset-independence pattern applied to a canvas-rendered Rive state machine instead of an SVG Lottie, see Rive interactive icon. For a CSS-only celebratory micro-interaction with no animation library at all, see confetti button or interactive hover button.
Customizing it
Export your own icon animation from After Effects with Bodymovin (or build one in LottieFiles' editor) and either host the resulting .json and pass a path instead of animationData, or inline it the same way this snippet does if you need zero-network guarantees. Swap renderer: 'svg' for 'canvas' if you're animating many icons at once and want lower per-instance overhead.
Build with AI
Build, Understand, Optimize, and Extend It With AI
You don't have to hand-decode the Lottie JSON schema to understand what heartAnimation is doing. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to walk through the layer's keyframed scale (s) and color (c) properties frame by frame, explaining how the i/o easing handles and the t (time) values on each keyframe produce the fill-in-and-settle motion, and why passing this object directly as animationData avoids the network dependency a path-based Lottie load would have. The same assistant can help you extend it — asking how to add a second keyframed property like rotation or opacity to the same layer, or how to generate a small inline Lottie JSON for a different icon shape (a star, a bell, a bookmark) from scratch. It's also useful for production guidance: ask it what changes when you swap animationData for a path pointing at a real exported .json file, including how loading and error states should be handled. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build a button with an icon that plays a short Lottie animation on hover, using lottie-web (load it from a CDN) with the animation data defined entirely inline in JavaScript rather than loaded from an external file.
Requirements:
- A button containing a label and an empty icon container element sized for a small icon (roughly 24-32px).
- Hand-author a minimal but structurally valid Lottie JSON object as a JavaScript object literal (not a hosted file) with the required top-level fields (version, frame rate, in/out points, width/height, layers) and at least one shape layer that has two separately keyframed properties — for example scale animating from 0 to a slight overshoot and settling, and fill color shifting between two colors — spanning roughly 30-45 frames at 30fps.
- Call lottie.loadAnimation with renderer set to svg, loop set to false, autoplay set to false, and animationData (not path) set to that inline object, targeting the icon container.
- On the button's mouseenter event, set the animation's playback direction forward and call play(). On mouseleave, set the direction backward and call play() again, so hovering off reverses the animation smoothly from wherever it currently is rather than snapping back to the start or restarting from frame 0.
- Confirm that rapidly moving the mouse on and off the button doesn't cause the animation to glitch, reset unexpectedly, or throw — direction changes mid-playback should interrupt smoothly.
- In a comment, explain that a production version would typically export a real animation from After Effects via the Bodymovin plugin and either host the resulting JSON and load it via a path, or inline it the same way if a zero-network-dependency guarantee is needed.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Add the lottie-web CDNInclude lottie.min.js from the CDN panel.
- 2Paste HTML, CSS, and JSA button with an empty icon container renders.
- 3Hover the buttonThe heart icon animates in, scaling and changing color.
- 4Move awayThe animation reverses smoothly back to its start frame.
- 5Swap the animation dataReplace heartAnimation with your exported Lottie JSON.
- 6Use a hosted file insteadPass path: 'your.json' in place of animationData.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
A live code sandbox has no server to host a .json asset on, and referencing an external URL risks a broken icon if that file ever moves or 404s. Passing a hand-built object directly as animationData sidesteps both problems entirely — lottie-web accepts a JavaScript object just as readily as a fetched JSON file, so the button always renders correctly with zero network dependency.
It's a genuine, if minimal, Lottie JSON document — it has the required top-level fields (v, fr, ip, op, layers) and a shape layer with real keyframed scale and color properties. lottie-web parses and renders it exactly as it would a much larger file exported from After Effects; it's just deliberately small, with one layer and two animated properties, rather than a mock object with fake-looking data.
autoplay is set to false so nothing plays until interaction. On mouseenter, setDirection(1) then play() runs the animation forward from its current frame; on mouseleave, setDirection(-1) then play() runs it backward toward frame 0. Because Lottie tracks the current frame rather than always restarting, moving the mouse on and off quickly reverses smoothly from wherever playback was interrupted instead of jumping or restarting from scratch.
Export a Bodymovin/Lottie JSON from After Effects (or build one in the LottieFiles editor), then either host that .json file and pass path: "your-icon.json" instead of animationData in the loadAnimation call, or — if you need the same zero-network guarantee this snippet has — inline the exported JSON object directly as animationData the same way heartAnimation is defined here.
renderer: "svg" produces crisp vector output at any button size with no raster scaling artifacts, and is the more common default for a single small icon animation. renderer: "canvas" trades that crispness for lower per-instance overhead, which matters more when animating many Lottie icons simultaneously on one page — for a single hover icon like this button, SVG is the better default.