Skip to content
delta

Add Rive animations

Play Rive animations on any page or template, from one pinned runtime in site.js that loads only where it is used.

Recipe
Add Rive animations to my site. Start with get-design-context, get-site-assets (include site.js) and get-site-scripts. Do not change anything yet. 1. Ask me which .riv files to use and where they go. upload-media does not accept .riv files, so ask me to upload them to the Media Library (WordPress needs a plugin that allows .riv) or to give you their URL. Use files only from sources I trust. Rive Marketplace files need a CC BY credit. 2. Add one Rive setup at the end of site.js with patch-site-assets: a. Load @rive-app/canvas from jsDelivr at a pinned version, once, and only on pages that have a Rive canvas. Set the .wasm file to the same folder with rive.RuntimeLoader.setWasmUrl. Use @rive-app/webgl2 only if the file needs the Rive Renderer. b. Run it on DOMContentLoaded. Play each canvas[data-rive-src], with optional data-rive-artboard and data-rive-state-machine. Use the stateMachine option: stateMachines is deprecated. c. Size the canvas in CSS with an aspect-ratio. Call resizeDrawingSurfaceToCanvas on load and when the canvas changes size. d. Control the animation with data binding (view models). State machine inputs and Rive event listeners are deprecated. Turn on autoBind only for files that have a view model. e. Pause animations that are off screen. With prefers-reduced-motion set to reduce, show a still frame. f. Controls are real HTML buttons or links. A canvas that only decorates gets aria-hidden="true"; one that carries meaning gets role="img" and an aria-label. 3. Add the animation to the page or template I chose. Test it on a draft page made with create-page, and tell me what you checked. Then ask me if I also want to see it on a sketchbook board. Before the first write, run create-snapshot. Show me each change as a diff and wait for my approval before you write it.