After Effects → Lottie Interaction Design

The web doesn't need a video file. It needs a vector animation that can react — to scroll, to hover, to a click, to a state change. That's what Lottie is for. The trick is treating After Effects as a component authoring tool, not a video editor: every layer is a named state, every marker is an interaction trigger, every Bodymovin export is a designed contract with the front-end.

The animation above ships as a single .lottie file with a Lottie Creator state machine inside it. The web player loads StateMachine1, then routes button and canvas clicks into named inputs like vanilla, straw, and reset so the animation changes state instead of just looping like a video.

• One file, every browser. The .lottie archive bundles the animation JSON, fonts, and any inline assets — no missing-asset edge cases.

• State-driven, not frame-driven. Layers and markers are named for intent (idle, hover, pressed, success) so the front-end can play segments instead of guessing frame numbers.

• Interactive surface. The dotLottie player exposes events for hover, click, segment-end — letting micro-motion drive real UI behaviour.

• Tiny payload. Vector + JSON means a state animation that would be a 2 MB MP4 lands as a 30 KB asset.

The classic motion-design failure mode is the gorgeous reel that never makes it into the shipping product. Lottie closes that gap — the animation you approved in After Effects is literally the animation that loads in production. No "we'll re-create it in code." No fidelity loss. Just the file.