Controle SVG com Web Animations API

A Web Animations API permite controlar animações usando JavaScript. O pacote gerado pelo Motion Lab funciona sem React e usa os mesmos keyframes e opções do preview.

Os arquivos do pacote

O index.html inclui o SVG inline, animation.css cuida do contêiner e animation.js inicializa as instâncias com data-sml-animation. Abra a pasta usando um servidor HTTP local, pois o script é um módulo.

Inicialização manual

import { initAnimation } from './animation.js';

// Para inicialização manual, não adicione data-sml-animation.
const container = document.querySelector('.minha-ilustracao');
const controller = initAnimation(container);
controller.pause();
controller.play();
controller.restart();
// Antes de remover a ilustração:
controller.dispose();

Mais de uma instância

Crie um contêiner para cada cópia do SVG-base exportado e inicialize cada um uma única vez. O helper remapeia IDs e referências locais de gradientes por instância. Suas buscas ficam limitadas ao contêiner recebido.

Descarte e movimento reduzido

dispose cancela animações e remove o listener da preferência de movimento reduzido. Quando essa preferência está ativa, o helper apresenta o SVG original estático. Mudanças da preferência são observadas durante a vida da instância.

Por que não usar img?

Um SVG carregado como imagem não expõe suas formas ao JavaScript da página. Insira o markup inline, como no index.html exportado. Não remova os wrappers gerados: eles preservam transformações originais do desenho.