Como adicionar animações Rive, Lottie e vídeo ao Webflow

O Webflow tem suporte nativo ao Rive?

Sim. Rive e Webflow anunciaram o suporte nativo em 18 de setembro de 2024. Nas palavras do Rive, você pode "arrastar e soltar os gráficos prontos para produção do Rive no seu projeto Webflow e conectá-los às interactions do Webflow." O elemento oferece configurações de layout, reprodução automática e rolagem por toque, além de tratamento de eventos.

Isso coloca o Webflow entre os construtores no-code com suporte nativo ao Rive, ao lado do elemento Rive do Wix Studio. Você não precisa de embed, tag de script nem biblioteca de terceiros para exibir um arquivo .riv, e a state machine dentro do arquivo continua funcionando: um personagem pode ficar em idle sozinho, reagir a um hover e tocar uma reação no clique.

O que o suporte nativo não oferece é lógica de aplicação arbitrária. As Interactions respondem a eventos da página (hover, clique, scroll, carregamento da página). Se você quer que o personagem mude para um estado de carregamento enquanto um formulário é enviado e comemore quando der certo, precisa de algumas linhas de código personalizado, explicadas na última seção.

Arquivos Rive costumam ser pequenos, o que combina com uma seção hero. Um personagem plano com muitos estados em um único arquivo geralmente tem dezenas de kilobytes, menos que um único vídeo curto. O download maior é o próprio runtime, então use o Rive nas páginas que precisam dele, e não em todas.

Como adicionar um arquivo .riv no Webflow?

O fluxo de trabalho descrito pelo Rive tem quatro passos:

1. Envie o arquivo .riv para o painel Assets.
2. Arraste o arquivo para o canvas ou para o Navigator. Você também pode inseri-lo pelo painel Add, em Media.
3. Configure o elemento nas configurações: escolha o artboard e a state machine e defina o ajuste (fit) e a reprodução automática.
4. Conecte a state machine às Interactions.

Escolher a state machine faz diferença. Se você não definir nenhuma, o arquivo toca a animação padrão e ignora os inputs. Um arquivo de personagem típico expõe uma state machine como CharacterStateMachine, com um número mood (0 idle, 1 happy, 2 wave, 3 thinking, 4 sad, 5 loading, 6 listening, 7 talking, 8 sleeping, 9 attention) e triggers como success, yes e no. Um arquivo pode ter várias state machines, por exemplo uma separada que toca uma intro uma vez e depois fica em idle.

Dimensione o elemento com uma proporção fixa, por exemplo uma caixa quadrada para um artboard quadrado, e defina o fit como contain para que o personagem nunca seja cortado em breakpoints menores.

Como controlar uma animação Rive com as Interactions do Webflow?

Crie uma interaction no elemento que deve provocar a mudança, como o clique em um botão, uma seção entrando na tela durante a rolagem ou o hover sobre um card. Nas ações da interaction, selecione o elemento Rive como alvo e defina um input da state machine: altere um número, alterne um booleano ou dispare um trigger.

Alguns padrões úteis com um personagem baseado em humor:

• Hover em um card de preços: defina mood como 1 (happy); ao tirar o mouse, volte para 0.
• Clique em uma chamada para ação: dispare yes para um aceno rápido de cabeça antes de o link abrir.
• Rolagem até o FAQ: defina mood como 3 (thinking).
• Carregamento da página: dispare enter para que o personagem entre em cena em vez de simplesmente aparecer.

Mantenha os loops tranquilos. Um mascote em um loop constante chamando atenção ao lado do texto distrai quem está lendo, então reserve os humores mais agitados para momentos curtos e volte ao idle. Consulte a documentação atual do Webflow para ver quais propriedades do Rive as Interactions conseguem controlar, incluindo eventual suporte a Data Binding.

Como adicionar Lottie ou dotLottie no Webflow?

O Webflow tem um elemento próprio para animações Lottie. Arraste-o do painel Add (em Media) para o canvas e selecione seu arquivo Lottie JSON ou dotLottie. Assim como o elemento Rive, ele pode ser controlado por Interactions, por exemplo para tocar uma vez ao entrar na tela ou acompanhar a rolagem da página.

O Lottie funciona bem para ilustrações que tocam do início ao fim: uma cena hero, uma sequência de ícones, um diagrama ligado à rolagem. Arquivos dotLottie são compactados, então prefira esse formato ao JSON puro quando sua ferramenta exportar os dois.

Escolha o Rive em vez do Lottie quando a animação precisar de vários estados e reações em um único arquivo, como um mascote que fica em idle, acena no hover e comemora no clique. Com Lottie, normalmente você criaria isso como animações ou segmentos separados e faria a troca entre eles por conta própria. O guia Rive vs Lottie compara os dois em detalhes.

Quando usar um vídeo de fundo?

Use vídeo para filmagens e para clipes fixos que nunca precisam reagir: uma demo de produto, uma animação de marca em loop, uma montagem. O elemento Background Video do Webflow tem reprodução automática sem som e em loop, o que combina com seções hero.

O vídeo tem duas limitações para personagens:

• Não há estados. Um vídeo toca uma única sequência. Dá para alternar entre vários clipes conforme eventos usando código, mas cada clipe é um download separado.
• A transparência é complicada. Os navegadores não concordam nos formatos transparentes: Chrome, Edge e Firefox exibem WebM VP9 com alfa, enquanto o Safari precisa de HEVC com alfa em um .mov. Um único arquivo enviado não terá fundo transparente em todos os navegadores. Para sobrepor um personagem ao seu design com vídeo, use um embed de código personalizado com as duas fontes, como explica o guia de vídeo com fundo transparente.

Para um personagem, um arquivo .riv costuma ser menor e mais capaz que um vídeo. O gráfico acima compara um conjunto real: todas as animações em um único arquivo Rive de 40 KB contra 208 a 728 KB por vídeo de quatro segundos.

Como adicionar um personagem com humores a uma página do Webflow?

Quando o personagem precisar acompanhar eventos que as Interactions não enxergam, como o envio de um formulário ou uma requisição fetch, carregue você mesmo o runtime web do Rive. O Rive informa que seus runtimes têm suporte total com o recurso de código personalizado do Webflow. Coloque um elemento Code Embed onde o personagem deve aparecer (a disponibilidade de código personalizado depende do seu plano Webflow) e hospede o .riv como asset:

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.44.2"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://your-asset-url/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
</script>
<script>
  const form = document.querySelector("form");
  form.addEventListener("submit", () => {
    if (r.viewModelInstance) r.viewModelInstance.number("mood").value = 5; // loading
  });
</script>

Isso usa Data Binding: autoBind: true vincula o view model do arquivo, e você escreve o número mood ou chama trigger("success").trigger(). Os arquivos do Charmotion incluem CharacterViewModelMachine exatamente para isso, ao lado da state machine baseada em inputs para as Interactions nativas do Webflow, então o mesmo upload funciona nos dois casos. O estado de sucesso do próprio formulário do Webflow pode então chamar o trigger success antes de exibir a mensagem.

Como adicionar um personagem Rive interativo ao Webflow

1. Envie o arquivo. Adicione o .riv ao painel Assets do Webflow.
2. Posicione o elemento. Arraste o asset para o canvas ou para o Navigator, ou insira-o pelo painel Add, em Media.
3. Escolha a state machine. Nas configurações do elemento, escolha o artboard e a state machine, defina o fit como contain e ative a reprodução automática.
4. Adicione Interactions. Crie Interactions de hover, clique ou rolagem que definam o número de humor ou disparem um trigger no elemento Rive.
5. Adicione código para eventos do app. Para eventos de formulário ou de API, use um Code Embed com o runtime web do Rive e defina o view model a partir dos seus handlers.

Perguntas frequentes

Preciso de código personalizado para usar o Rive no Webflow?

Não. Desde setembro de 2024, o Rive é um formato nativo do Webflow: envie o .riv, arraste-o para o canvas, escolha a state machine e conecte-a às Interactions. Código personalizado só é necessário quando a animação precisa reagir a eventos que as Interactions não detectam, como respostas de API.

O Webflow reproduz arquivos dotLottie?

Sim. O elemento de animação Lottie do Webflow aceita arquivos Lottie JSON e dotLottie, e as Interactions podem controlar a reprodução, por exemplo tocando ao entrar na tela durante a rolagem. Prefira dotLottie quando sua ferramenta de exportação oferecer, porque o formato é compactado e pode reunir várias animações, temas e state machines em um único arquivo.

Por que minha animação Rive no Webflow não reage às Interactions?

Na maioria das vezes, a state machine não está selecionada nas configurações do elemento, então a animação padrão toca e os inputs são ignorados. Verifique também se os nomes e tipos dos inputs na sua interação correspondem exatamente aos do arquivo, incluindo maiúsculas e minúsculas. Por fim, confirme que a reprodução automática está ativada, já que uma state machine pausada não avalia suas transições.

Respostas rápidas deste guia

• O Webflow tem suporte nativo ao Rive?

Fontes

• Rive is natively supported in Webflow, Rive
• Lottie animations, Webflow Help Center
• Web (JS) runtime, Rive
• Data binding on the web, Rive
• Video with alpha transparency on the web, Jake Archibald