{"course":{"slug":"motion-and-audio","title":"Motion, Sound and Music","url":"https://addaly.com/learn/motion-and-audio","level":"intermediate","track":"create"},"lesson":{"slug":"which-technology","title":"Five ways to put motion on a screen","url":"https://addaly.com/learn/motion-and-audio/which-technology","position":19,"of":72,"minutes":10,"answer":"The delivery format follows from three questions (does it respond to state, is the content vector or photographic.","keyIdea":"The delivery format follows from three questions (does it respond to state, is the content vector or photographic, and how often will it change) and the first of those eliminates more options than the other two combined."},"body":{"format":"markdown","text":"## Five ways to put motion on a screen, and they are not interchangeable\n\nBefore any of the format detail, there is a decision to make, and getting it wrong costs weeks. The five options, and the question each one answers:\n\n1. **Code: CSS, the Web Animations API, or a library.** The motion is generated at runtime from values. Infinitely adjustable, scales to any size, costs nothing to download, and requires a developer for every change.\n2. **Vector data: Lottie, SVG, Rive.** The motion is authored in a design tool and exported as a file the runtime plays back. Scales without loss, small, and can be swapped without a code change.\n3. **Raster frames: sprite sheet, animated WebP, APNG, GIF.** Every frame is stored as pixels. Handles anything you can draw, including textures and photographic content, at the cost of size and memory.\n4. **Video.** The same as raster frames but with interframe compression, which is an enormous saving. Handles photographic and filmed content. Weak at transparency, awkward to control precisely.\n5. **A real-time renderer: Canvas, WebGL, a game engine.** Anything is possible and everything is your problem.\n\n## The three questions that decide it\n\n**Does the motion need to respond to state?** If it must pause at 40 per cent, reverse, branch depending on whether the user is signed in, or track a scroll position, you need code, Rive, or Lottie with segment control. A video or an animated image plays from start to finish and takes no instruction beyond play and stop. This is the question that eliminates the most options and is usually asked last.\n\n**Is the content vector or photographic?** A logo, an icon, a character drawn in flat shapes: vector. Anything filmed, anything with a photographic texture, anything with a complex gradient mesh or a blur-heavy effect: raster or video. Trying to force photographic content into a vector format produces a file with thousands of paths that is larger and slower than the video would have been.\n\n**How many times will it change?** A hero animation that marketing will revise monthly should be a file a designer can replace. A button press state that will never change should be six lines of CSS. The cost of a format is not only bytes; it is who can edit it and what they need in order to ship the change.\n\n## The sizes, roughly\n\nFor a three-second 512×512 animation of a simple illustrated scene, the orders of magnitude are consistent enough to plan with:\n\n> Figure: The question that eliminates the most options. Must respond to state: Pause at 40 per cent, reverse, or branch; Follow a scroll position or a drag; Blend from wherever it is when interrupted; CSS, the Web Animations API, Rive, or Lottie driven by segment. Plays from start to finish: Takes no instruction beyond play and stop; Video, animated WebP, APNG, GIF; A sprite sheet stepped by CSS; Cheaper and simpler, and wrong the moment state matters. Three questions decide a delivery format: does the motion respond to state, is the content vector or photographic, and how often will it change. The first eliminates more options than the other two together, and it is the one usually asked last, after a week has been spent in the wrong tool.\n\n- **Lottie JSON**: 10 to 60KB, often smaller gzipped than a single frame as PNG.\n- **SVG with CSS**: 5 to 40KB for simple shapes.\n- **MP4 (H.264)**: 100 to 400KB.\n- **Animated WebP**: 300KB to 1.5MB.\n- **APNG**: 1 to 4MB.\n- **GIF**: 2 to 6MB, and it will look worse than all of the above.\n\nThe interesting gap is between the video and the raster-frame formats. It is not a small optimisation; it is a factor of five to twenty, and the reason is covered in the lesson on GIF.\n\n## The runtime costs nobody budgets for\n\nDownload size is the number everybody checks. Two others matter more on a weak device.\n\n**Decoded memory.** A raster animation has to exist in memory as uncompressed pixels while it plays. A 24-frame 500×500 sprite sheet is 24 × 500 × 500 × 4 bytes (about 24MB) regardless of the fact that the PNG on disk was 300KB. On a phone with a handful of these, you are the reason the browser tab reloads.\n\n**Per-frame CPU.** A Lottie file with 600 shape layers is small to download and expensive to render, because the player is rebuilding vector geometry every frame. The SVG renderer in lottie-web creates a DOM node per shape; at a few hundred nodes, animating them 60 times a second is real main-thread work. The canvas renderer is usually faster for complex files and loses crisp scaling.\n\nA useful check: if the file is under 50KB and still stutters, the problem is shape count, not bytes.\n\n## A decision path that works\n\n- Two states, one element, no branching → **CSS transition**.\n- A loop or a multi-step sequence in code, still simple shapes → **CSS keyframes or the Web Animations API**.\n- An illustrated animation a designer owns and will revise → **Lottie**.\n- The same, but it must respond to hover, drag, or application state → **Rive**, or Lottie with segment playback.\n- A drawn line that writes itself on, or an icon that morphs → **SVG**, with `stroke-dashoffset` or a path interpolation.\n- Filmed or photographic content → **video**, with the MP4 and WebM pair.\n- Filmed content that must sit over an arbitrary background → **alpha video**, and read the transparency lesson before promising it.\n- Fewer than about twenty frames of hand-drawn raster art → **sprite sheet with `steps()`**.\n- None of the above → **Canvas or WebGL**, and budget accordingly.\n\n## The free path\n\nEvery format here has a free authoring route. **Glaxnimate** authors and exports Lottie and SVG, open source, runs on a laptop with no GPU. **Inkscape** draws SVG and its output can be animated with CSS. **Blender** exports frame sequences for sprite sheets and renders video with alpha. **ffmpeg** converts between every raster and video format discussed. **Krita** does frame-by-frame animation and exports sequences. After Effects and Rive are named in job adverts and worth naming in a portfolio; nothing in this module requires either.\n\n## The limitation\n\nThere is no format that is small, scalable, photographic, interactive and universally supported. Every choice here trades one of those away, and most arguments about formats are two people optimising different corners of that trade without saying which one they are defending. Write down which of the three questions above your project answers \"yes\" to before the argument starts, and most format debates end in a minute."},"check":{"question":"A team needs an illustrated character that waves when a user hovers, freezes mid-wave if the pointer leaves, and will be revised by a designer every few weeks. Which delivery route fits, and why?","options":[{"text":"A looping MP4 with a transparent HEVC track, because video compression makes it the smallest option and Safari's alpha support covers the hover case.","correct":false,"tempting":"Video plays from start to finish and takes no instruction beyond play and stop, so it cannot freeze mid-gesture on an interruption."},{"text":"A sprite sheet with a steps() animation, because random access to any frame is instant and the designer can regenerate the sheet from new drawings.","correct":false,"tempting":"Gives frame-accurate control but no blending on interruption, and a character-sized sheet costs tens of megabytes of decoded memory."},{"text":"Rive, or Lottie driven by segment playback, because the motion must respond to state and a designer needs to replace the file without a code change.","correct":true},{"text":"A Canvas or WebGL renderer written by a developer, because only a real-time renderer can interpolate from an arbitrary mid-animation position back to a rest pose when an interaction is cancelled.","correct":false,"tempting":"Overstates what requires a custom renderer; state-machine runtimes and even CSS transitions blend from the current value on interruption."}]},"prev":{"slug":"compositor-only-properties","title":"Why transform is cheap and width is not","url":"https://addaly.com/learn/motion-and-audio/compositor-only-properties"},"next":{"slug":"lottie-and-its-limits","title":"What Lottie carries and what it drops","url":"https://addaly.com/learn/motion-and-audio/lottie-and-its-limits"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'Five ways to put motion on a screen', in Motion, Sound and Music. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/motion-and-audio/which-technology (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"Five ways to put motion on a screen","courseTitle":"Motion, Sound and Music","module":{"index":3,"slug":"shipping-the-motion","title":"Shipping the motion"},"answer":null,"keyIdea":"The delivery format follows from three questions (does it respond to state, is the content vector or photographic, and how often will it change) and the first of those eliminates more options than the other two combined.","hero":{"kind":"figure","figure":{"t":"figure","label":"Figure 3.1","figure":{"left":{"title":"Must respond to state","items":["Pause at 40 per cent, reverse, or branch","Follow a scroll position or a drag","Blend from wherever it is when interrupted","CSS, the Web Animations API, Rive, or Lottie driven by segment"]},"type":"compare","right":{"title":"Plays from start to finish","items":["Takes no instruction beyond play and stop","Video, animated WebP, APNG, GIF","A sprite sheet stepped by CSS","Cheaper and simpler, and wrong the moment state matters"]},"title":"The question that eliminates the most options","caption":"Three questions decide a delivery format: does the motion respond to state, is the content vector or photographic, and how often will it change. The first eliminates more options than the other two together, and it is the one usually asked last, after a week has been spent in the wrong tool."},"alt":"Figure: The question that eliminates the most options. Must respond to state: Pause at 40 per cent, reverse, or branch; Follow a scroll position or a drag; Blend from wherever it is when interrupted; CSS, the Web Animations API, Rive, or Lottie driven by segment. Plays from start to finish: Takes no instruction beyond play and stop; Video, animated WebP, APNG, GIF; A sprite sheet stepped by CSS; Cheaper and simpler, and wrong the moment state matters. Three questions decide a delivery format: does the motion respond to state, is the content vector or photographic, and how often will it change. The first eliminates more options than the other two together, and it is the one usually asked last, after a week has been spent in the wrong tool."}},"blocks":[{"t":"h2","id":"five-ways-to-put-motion-on-a-screen-and-they-are-not-interch","runs":[{"text":"Five ways to put motion on a screen, and they are not interchangeable"}]},{"t":"p","runs":[{"text":"Before any of the format detail, there is a decision to make, and getting it wrong costs weeks. The five options, and the question each one answers:"}]},{"t":"ol","start":1,"items":[[{"text":"Code: CSS, the Web Animations API, or a library.","b":true},{"text":" The motion is generated at runtime from values. Infinitely adjustable, scales to any size, costs nothing to download, and requires a developer for every change."}],[{"text":"Vector data: Lottie, SVG, Rive.","b":true},{"text":" The motion is authored in a design tool and exported as a file the runtime plays back. Scales without loss, small, and can be swapped without a code change."}],[{"text":"Raster frames: sprite sheet, animated WebP, APNG, GIF.","b":true},{"text":" Every frame is stored as pixels. Handles anything you can draw, including textures and photographic content, at the cost of size and memory."}],[{"text":"Video.","b":true},{"text":" The same as raster frames but with interframe compression, which is an enormous saving. Handles photographic and filmed content. Weak at transparency, awkward to control precisely."}],[{"text":"A real-time renderer: Canvas, WebGL, a game engine.","b":true},{"text":" Anything is possible and everything is your problem."}]]},{"t":"h2","id":"the-three-questions-that-decide-it","runs":[{"text":"The three questions that decide it"}]},{"t":"p","runs":[{"text":"Does the motion need to respond to state?","b":true},{"text":" If it must pause at 40 per cent, reverse, branch depending on whether the user is signed in, or track a scroll position, you need code, Rive, or Lottie with segment control. A video or an animated image plays from start to finish and takes no instruction beyond play and stop. This is the question that eliminates the most options and is usually asked last."}]},{"t":"p","runs":[{"text":"Is the content vector or photographic?","b":true},{"text":" A logo, an icon, a character drawn in flat shapes: vector. Anything filmed, anything with a photographic texture, anything with a complex gradient mesh or a blur-heavy effect: raster or video. Trying to force photographic content into a vector format produces a file with thousands of paths that is larger and slower than the video would have been."}]},{"t":"p","runs":[{"text":"How many times will it change?","b":true},{"text":" A hero animation that marketing will revise monthly should be a file a designer can replace. A button press state that will never change should be six lines of CSS. The cost of a format is not only bytes; it is who can edit it and what they need in order to ship the change."}]},{"t":"h2","id":"the-sizes-roughly","runs":[{"text":"The sizes, roughly"}]},{"t":"p","runs":[{"text":"For a three-second 512×512 animation of a simple illustrated scene, the orders of magnitude are consistent enough to plan with:"}]},{"t":"ul","items":[[{"text":"Lottie JSON","b":true},{"text":": 10 to 60KB, often smaller gzipped than a single frame as PNG."}],[{"text":"SVG with CSS","b":true},{"text":": 5 to 40KB for simple shapes."}],[{"text":"MP4 (H.264)","b":true},{"text":": 100 to 400KB."}],[{"text":"Animated WebP","b":true},{"text":": 300KB to 1.5MB."}],[{"text":"APNG","b":true},{"text":": 1 to 4MB."}],[{"text":"GIF","b":true},{"text":": 2 to 6MB, and it will look worse than all of the above."}]]},{"t":"p","runs":[{"text":"The interesting gap is between the video and the raster-frame formats. It is not a small optimisation; it is a factor of five to twenty, and the reason is covered in the lesson on GIF."}]},{"t":"h2","id":"the-runtime-costs-nobody-budgets-for","runs":[{"text":"The runtime costs nobody budgets for"}]},{"t":"p","runs":[{"text":"Download size is the number everybody checks. Two others matter more on a weak device."}]},{"t":"p","runs":[{"text":"Decoded memory.","b":true},{"text":" A raster animation has to exist in memory as uncompressed pixels while it plays. A 24-frame 500×500 sprite sheet is 24 × 500 × 500 × 4 bytes (about 24MB) regardless of the fact that the PNG on disk was 300KB. On a phone with a handful of these, you are the reason the browser tab reloads."}]},{"t":"p","runs":[{"text":"Per-frame CPU.","b":true},{"text":" A Lottie file with 600 shape layers is small to download and expensive to render, because the player is rebuilding vector geometry every frame. The SVG renderer in lottie-web creates a DOM node per shape; at a few hundred nodes, animating them 60 times a second is real main-thread work. The canvas renderer is usually faster for complex files and loses crisp scaling."}]},{"t":"p","runs":[{"text":"A useful check: if the file is under 50KB and still stutters, the problem is shape count, not bytes."}]},{"t":"h2","id":"a-decision-path-that-works","runs":[{"text":"A decision path that works"}]},{"t":"ul","items":[[{"text":"Two states, one element, no branching → "},{"text":"CSS transition","b":true},{"text":"."}],[{"text":"A loop or a multi-step sequence in code, still simple shapes → "},{"text":"CSS keyframes or the Web Animations API","b":true},{"text":"."}],[{"text":"An illustrated animation a designer owns and will revise → "},{"text":"Lottie","b":true},{"text":"."}],[{"text":"The same, but it must respond to hover, drag, or application state → "},{"text":"Rive","b":true},{"text":", or Lottie with segment playback."}],[{"text":"A drawn line that writes itself on, or an icon that morphs → "},{"text":"SVG","b":true},{"text":", with "},{"text":"stroke-dashoffset","code":true},{"text":" or a path interpolation."}],[{"text":"Filmed or photographic content → "},{"text":"video","b":true},{"text":", with the MP4 and WebM pair."}],[{"text":"Filmed content that must sit over an arbitrary background → "},{"text":"alpha video","b":true},{"text":", and read the transparency lesson before promising it."}],[{"text":"Fewer than about twenty frames of hand-drawn raster art → "},{"text":"sprite sheet with ","b":true},{"text":"steps()","b":true,"code":true},{"text":"."}],[{"text":"None of the above → "},{"text":"Canvas or WebGL","b":true},{"text":", and budget accordingly."}]]},{"t":"h2","id":"the-free-path","runs":[{"text":"The free path"}],"role":"free"},{"t":"p","runs":[{"text":"Every format here has a free authoring route. "},{"text":"Glaxnimate","b":true},{"text":" authors and exports Lottie and SVG, open source, runs on a laptop with no GPU. "},{"text":"Inkscape","b":true},{"text":" draws SVG and its output can be animated with CSS. "},{"text":"Blender","b":true},{"text":" exports frame sequences for sprite sheets and renders video with alpha. "},{"text":"ffmpeg","b":true},{"text":" converts between every raster and video format discussed. "},{"text":"Krita","b":true},{"text":" does frame-by-frame animation and exports sequences. After Effects and Rive are named in job adverts and worth naming in a portfolio; nothing in this module requires either."}]},{"t":"h2","id":"the-limitation","runs":[{"text":"The limitation"}],"role":"limit"},{"t":"p","runs":[{"text":"There is no format that is small, scalable, photographic, interactive and universally supported. Every choice here trades one of those away, and most arguments about formats are two people optimising different corners of that trade without saying which one they are defending. Write down which of the three questions above your project answers “yes” to before the argument starts, and most format debates end in a minute."}]}],"check":{"question":[{"text":"A team needs an illustrated character that waves when a user hovers, freezes mid-wave if the pointer leaves, and will be revised by a designer every few weeks. Which delivery route fits, and why?"}],"options":[{"text":[{"text":"A looping MP4 with a transparent HEVC track, because video compression makes it the smallest option and Safari’s alpha support covers the hover case."}],"correct":false,"tempting":[{"text":"Video plays from start to finish and takes no instruction beyond play and stop, so it cannot freeze mid-gesture on an interruption."}]},{"text":[{"text":"A sprite sheet with a steps() animation, because random access to any frame is instant and the designer can regenerate the sheet from new drawings."}],"correct":false,"tempting":[{"text":"Gives frame-accurate control but no blending on interruption, and a character-sized sheet costs tens of megabytes of decoded memory."}]},{"text":[{"text":"Rive, or Lottie driven by segment playback, because the motion must respond to state and a designer needs to replace the file without a code change."}],"correct":true,"tempting":null},{"text":[{"text":"A Canvas or WebGL renderer written by a developer, because only a real-time renderer can interpolate from an arbitrary mid-animation position back to a rest pose when an interaction is cancelled."}],"correct":false,"tempting":[{"text":"Overstates what requires a custom renderer; state-machine runtimes and even CSS transitions blend from the current value on interruption."}]}],"order":[1,0,3,2],"why":null},"prev":{"slug":"compositor-only-properties","title":"Why transform is cheap and width is not","minutes":10},"next":{"slug":"lottie-and-its-limits","title":"What Lottie carries and what it drops","minutes":10}}}