Como adicionar uma animação Rive ao Wix Studio

O Wix Studio tem um elemento Rive nativo?

Sim. O Wix Studio adicionou uma integração com o Rive, e a central de ajuda documenta um elemento Rive no Studio Editor. Se um tutorial disser que o Wix Studio precisa de um embed HTML para cada arquivo Rive, ele é anterior a esse elemento.

1. Clique em Add Elements, à esquerda do editor.
2. Clique em Media, depois em Rive e, em seguida, no ícone Add to Site ao lado de Rive Animations.
3. Clique em Change File e escolha um .riv no Media Manager, ou envie um com + Upload Media.
4. Clique em Add to Page.

Enviar o .riv para o Media Manager antes é opcional; você pode enviar durante a configuração. O arquivo precisa ser um .riv exportado do Rive, não o arquivo de projeto .rev do editor nem um JSON do Lottie. Você pode colocar vários elementos Rive em uma mesma página.

O elemento fica contido na sua caixa delimitadora, então redimensione-o pelas alças e a animação se ajusta dentro dela. Segundo o próprio tutorial do Wix, a prévia do editor mostra apenas animações de loop ou de entrada, então confira as reações no site publicado.

Qual artboard e qual state machine devo escolher?

Selecione o elemento e abra Settings. O Wix lista estas opções:

Como nada no Wix define um input, escolha a state machine que fica certa com os valores iniciais. Um arquivo controlado por um número e triggers simplesmente fica parado no primeiro estado.

Um arquivo do Charmotion mostra bem essa escolha. Ele contém três state machines: CharacterStateMachine (o input clássico mood mais triggers), CharacterViewModelMachine (os mesmos estados por meio de um view model Character para Data Binding) e LaunchStateMachine (uma intro de cerca de 2,6 segundos que termina na pose de repouso e não dispara evento de fim). No elemento nativo, escolha CharacterStateMachine para um personagem em loop idle, já que o mood começa em 0 (idle), ou LaunchStateMachine para uma intro que toca uma vez. O Wix não documenta se o elemento faz binding de view models, então teste CharacterViewModelMachine em uma prévia publicada antes de depender dele.

As interações do Wix conseguem mudar o humor sem código?

Não. As interações do Wix Studio (entrada, loop, hover, clique, rolagem) animam os elementos como caixas: aplicam fade, movem ou escalam o elemento Rive inteiro. Elas não alcançam o interior do arquivo para definir um número ou disparar um trigger.

O que funciona sem código é a interatividade embutida no próprio .riv. Os listeners do Rive reagem ao movimento do ponteiro e a cliques no canvas, e o tutorial do Wix mostra um arquivo em que pontos seguem o mouse e clicar em um botão de alternância muda o fundo. Se você quer reações de hover ou clique sem código, adicione-as no editor do Rive como listeners na arte e depois envie o novo arquivo.

Duas coisas influenciam isso no celular. Com Enable touch scroll ativado, arrastar sobre o elemento rola a página; desative só se o arquivo precisar de gestos de arrastar. E mantenha as áreas tocáveis grandes, já que é fácil errar o toque em um personagem pequeno no celular.

Tudo o que depende do resto da página, como comemorar depois do envio de um formulário ou mudar para uma pose pensativa enquanto um agendamento carrega, precisa de código.

Preciso do Velo para definir inputs ou usar Data Binding?

Sim, e não pelo elemento Rive. Em outubro de 2026, a referência da API $w do Velo lista elementos como Lottie e HtmlComponent, mas nenhum elemento Rive, então não há forma documentada de definir um input do Rive ou uma propriedade de view model pelo código da página. O caminho que funciona é você mesmo rodar o runtime web do Rive dentro de um elemento HTML iFrame e enviar mensagens para ele.

Adicione o elemento HTML iFrame, escolha a opção de código e cole um canvas mais o runtime. A documentação de embed do Wix diz que só códigos e URLs HTTPS são exibidos, então hospede o .riv em uma CDN HTTPS que permita requisições cross-origin:

<style>html, body { margin: 0; height: 100%; }</style>
<canvas id="mascot" style="width: 100%; height: 100%"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
  // Page code sends { mood: 3 } or { trigger: "success" }.
  window.addEventListener("message", (event) => {
    const vmi = r.viewModelInstance;
    const msg = event.data || {};
    if (!vmi) return;
    if (typeof msg.mood === "number") vmi.number("mood").value = msg.mood;
    if (typeof msg.trigger === "string") vmi.trigger(msg.trigger)?.trigger();
  });
</script>

Depois, envie mensagens pelo código da página. O Wix documenta postMessage() no elemento HTML para mensagens da página para o embed, recebidas no embed por um listener de message:

// Page code. #mascotEmbed is the HTML iFrame element's ID.
$w.onReady(() => {
  $w("#helpButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ mood: 3 });          // thinking
  });
  $w("#joinButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ trigger: "success" });
  });
});

O embed roda em um iframe, então não consegue ler outros elementos da página diretamente; as mensagens fazem a ponte. Se você também enviar mensagens do embed de volta para a página, o Wix recomenda passar a URL do seu site como origem de destino em vez de "*".

Como adicionar o Rive no Wix Editor clássico?

O artigo do Wix sobre Rive foi escrito para o Studio Editor, e não encontramos nenhum elemento Rive documentado para o Wix Editor clássico. Nele, use um embed HTML:

1. Clique em Add Elements, depois em Embed Code e em Popular Embeds.
2. Escolha Embed HTML e adicione-o à página.
3. Clique no embed e depois em Enter Code, cole o trecho da seção anterior em Add your code here e clique em Apply.

O Wix observa que o elemento HTML é um iframe, então o conteúdo dele não é responsivo, e tamanhos fixos em pixels podem cortá-lo. Por isso o trecho dimensiona o canvas com 100% de largura e altura e deixa você redimensionar o elemento por tela. A mesma ponte via postMessage funciona com o código de página do Velo.

Se você não precisa de reações, um MP4 sem som e em loop em um elemento de vídeo é mais simples e funciona nos dois editores.

O fundo vai ficar transparente? E como lidar com os breakpoints?

O elemento desenha o artboard como ele foi criado. Se o artboard tem um preenchimento de fundo, você vê esse preenchimento; se não tem, a seção por trás aparece. É por isso que o próprio tutorial do Wix escolhe um artboard claro em vez de um com fundo preto. Remova o preenchimento do artboard no Rive, ou escolha um artboard sem preenchimento, quando o personagem tiver que ficar sobre a cor da sua página.

Quanto aos breakpoints, o Wix diz que as configurações do Rive valem para todos os breakpoints por padrão. Use Responsive behavior no painel Inspector para que o elemento escale com o contêiner, e deixe Fit e Alignment manterem o personagem visível. Se o arquivo usa layouts do Rive, defina Fit como Layout e as opções de layout dele são mantidas.

A lista de configurações do Wix não tem opção de movimento reduzido. Para um hero grande em loop, mantenha o movimento calmo ou use o caminho do embed, em que o snippet verifica prefers-reduced-motion e pula a reprodução automática.

Adicionar uma animação Rive ao Wix Studio

1. Adicione o elemento. No Studio Editor, clique em Add Elements, depois em Media, depois em Rive, e adicione Rive Animations à página.
2. Envie o arquivo. Clique em Change File e escolha ou envie seu .riv no Media Manager. Depois, clique em Add to Page.
3. Escolha o artboard e a state machine. Abra Settings e escolha o artboard e uma state machine que fique bem com os valores iniciais.
4. Configure a reprodução. Defina Fit, Alignment, Autoplay e Enable touch scroll, e dê ao elemento um nome acessível ou marque-o como decorativo.
5. Deixe responsivo. Defina o comportamento responsivo no Inspector e confira cada breakpoint.
6. Adicione código só se precisar. Para humores controlados por eventos da página, use um elemento HTML iFrame com o runtime web do Rive e envie mensagens a ele com postMessage a partir do código da página.

Perguntas frequentes

Posso enviar um arquivo .riv para o Wix Media Manager?

Sim. No elemento Rive, clique em Change File e escolha um .riv que já esteja no Media Manager ou envie um com + Upload Media. O Wix pede um .riv exportado corretamente do Rive, então exporte pelo editor do Rive em vez de enviar o arquivo do projeto.

Por que meu elemento Rive no Wix Studio mostra a animação errada?

O checklist do Wix é: o artboard, a state machine e o tamanho do elemento. Um arquivo pode ter vários artboards e state machines, e o elemento toca os que estão selecionados em Settings. Se estiver tudo certo e ainda assim não funcionar, exporte o .riv do Rive de novo, caso o arquivo esteja corrompido.

Um elemento Rive deixa a página do Wix mais lenta?

Ele adiciona o runtime do Rive e o seu arquivo .riv à página, o que costuma ser bem menor que um vídeo equivalente. Mantenha poucos elementos animados por página, use um arquivo pequeno e evite que uma animação grande seja a primeira coisa pela qual os visitantes precisam esperar.

Respostas rápidas deste guia

• O Wix aceita animações Rive?
• O Wix Velo consegue mudar o estado de uma animação Rive?

Fontes

• Studio Editor: Adding and setting up a Rive animation, Wix Help Center
• How to add Rive animations to Wix Studio, Wix Studio Academy
• Wix Studio x Rive, Wix Studio
• $w: Introduction, Wix Developers
• Messaging between a site page and an HTML element, Wix Developers
• Wix Editor: Embedding a site or a widget, Wix Help Center
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive