Como adicionar uma animação Rive ao Bubble sem o plugin antigo

Devo usar o plugin Rive para Bubble ou o elemento HTML?

Use o elemento HTML. O Rive anunciou um plugin para Bubble no fórum do Bubble em 31 de agosto de 2021. No mesmo tópico, usuários relataram em 2021 e 2022 que não conseguiam fazê-lo funcionar e, em outubro de 2023, alguém perguntou se ele ainda tinha suporte; um frequentador do fórum respondeu que o autor original não aparecia no fórum havia mais de dois anos. Ninguém do lado do plugin respondeu. O plugin também é anterior ao Data Binding do Rive, que é como os arquivos de personagem atuais expõem seus controles.

O elemento HTML não tem nenhum desses problemas. O manual do Bubble o descreve como um elemento que "executa HTML na página", com dois detalhes importantes aqui:

• Os scripts rodam apenas no modo de execução. "Se o HTML contiver tags script, elas só serão executadas no modo de execução, e não no editor." Teste na prévia.
• Dados dinâmicos funcionam dentro dele. Você pode inserir entradas dinâmicas no HTML, então a URL do .riv pode vir de um campo do banco de dados.

Como é você quem escreve o script, você escolhe e fixa a versão do runtime do Rive, em vez de depender do que um plugin incluiu. Para uma comparação lado a lado de Bubble, Wix Studio e Webflow, veja Rive e Lottie em ferramentas no-code.

Como hospedar o arquivo .riv no Bubble?

Envie-o pelo gerenciador de arquivos da aba Data, como usuários do fórum descrevem para o plugin, e copie a URL do arquivo. Links de arquivos do Bubble costumam ser relativos ao protocolo (começam com //); coloque https: na frente antes de usar um deles em um script.

O runtime baixa o .riv com uma requisição cross-origin, porque o domínio do seu app e a CDN de arquivos do Bubble são hosts diferentes. Isso só funciona se a CDN enviar cabeçalhos CORS. Quando verificamos arquivos na CDN do Bubble em 25 de outubro de 2026, as respostas incluíam access-control-allow-origin: *. Verifique seu próprio arquivo da mesma forma:

curl -sI -H "Origin: https://yourapp.bubbleapps.io" \
  "https://YOUR-APP.cdn.bubble.io/f1234/character.riv" | grep -i access-control

Se o cabeçalho não aparecer, hospede o .riv em um bucket de armazenamento ou CDN em que você controle o CORS, e mantenha HTTPS. Vale conhecer mais duas opções:

• Arquivos por usuário ou por cliente. Guarde o .riv em um campo de arquivo e insira-o no src com os dados dinâmicos do Bubble, para que cada workspace mostre o próprio mascote.
• O arquivo WASM. O runtime também busca o rive.wasm, por padrão no unpkg. Se precisar hospedá-lo você mesmo, o Rive documenta RuntimeLoader.setWasmUrl(), e a versão do WASM deve ser a mesma do runtime.

Como incorporar o canvas do Rive em um elemento HTML do Bubble?

Adicione um elemento HTML, deixe Display as an iFrame desmarcado e cole o snippet abaixo. Com a opção de iframe desligada, o código roda na própria página, e é isso que permite que os workflows acessem a animação depois.

<div style="width: 100%; aspect-ratio: 1 / 1">
  <canvas id="mascot" style="width: 100%; height: 100%"
          role="img" aria-label="Animated mascot"></canvas>
</div>
<script>
(function () {
  function start() {
    if (window.mascot) window.mascot.cleanup();   // HTML element re-rendered
    var reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
    var r = new rive.Rive({
      src: "https://YOUR-APP.cdn.bubble.io/f1234/character.riv",
      canvas: document.getElementById("mascot"),
      stateMachine: "CharacterViewModelMachine",
      autoplay: !reduce,
      autoBind: true,
      onLoad: function () {
        r.resizeDrawingSurfaceToCanvas();
        window.mascot = r;
      },
    });
  }
  if (window.rive) return start();
  var s = document.createElement("script");
  s.src = "https://unpkg.com/@rive-app/canvas@2.47.1";
  s.onload = start;               // wait for the runtime before using it
  document.head.appendChild(s);
  window.addEventListener("resize", function () {
    if (window.mascot) window.mascot.resizeDrawingSurfaceToCanvas();
  });
})();
</script>

Por que ele foi escrito assim:

• O runtime é carregado com um callback onload. Usuários do fórum do Bubble relataram que uma biblioteca carregada por uma tag script em um elemento HTML ainda não estava definida quando o script inline seguinte era executado. Criar o elemento script e iniciar o Rive no onload evita essa condição de corrida.
• cleanup() antes de recriar. Se o Bubble renderizar o elemento de novo, por exemplo quando um grupo oculto volta a aparecer, a instância antiga é liberada antes de uma nova começar.
• stateMachine e autoBind: true. Sem o nome de uma state machine, o runtime toca a primeira timeline que encontrar e ignora os inputs; o autoBind vincula o view model padrão do arquivo para que você possa definir propriedades.
• Movimento reduzido. Se o visitante pedir menos movimento, o arquivo carrega sem reprodução automática.

Substitua CharacterViewModelMachine pelo nome da state machine do seu arquivo, se for diferente. Fixe a versão do runtime, como acima, para que um novo lançamento não mude seu app sem aviso.

Como mudar a animação a partir de um workflow do Bubble?

Instale o plugin Toolbox e use a ação Run javascript. Como o snippet guarda a instância como window.mascot, qualquer passo de workflow pode definir uma propriedade do view model ou disparar um trigger:

// Toolbox "Run javascript" action, step 1 of "Button Save is clicked"
if (window.mascot) window.mascot.viewModelInstance.number("mood").value = 5; // loading

// ...your Bubble steps: Make changes to a thing, API call...

// last step: celebrate, then back to idle
if (window.mascot) {
  var vm = window.mascot.viewModelInstance;
  vm.trigger("success").trigger();
  vm.number("mood").value = 0;
}

Um padrão que funciona bem para a maioria dos apps:

• Antes de passos lentos (chamadas de API, uploads de arquivos, backend workflows), defina o humor loading.
• Depois de um sucesso, dispare uma reação única e volte para idle.
• Em caso de falha, use o evento de erro da página no Bubble para disparar error e mudar para o humor sad ou attention.

Para o caminho inverso, da animação para o Bubble, o Toolbox tem um elemento Javascript to Bubble que expõe uma função chamada bubble_fn_ seguida do seu sufixo. Chame-a a partir do onLoad, por exemplo para definir um custom state que esconde uma imagem provisória quando o mascote estiver pronto.

Se o seu arquivo usa o sistema antigo de inputs em vez de Data Binding, defina os inputs com r.stateMachineInputs("YourStateMachine"); o guia de state machine explica a diferença.

Um mascote Rive pode ser a tela de carregamento de um app Bubble?

Funciona melhor para carregamentos dentro do app, não para a primeira renderização. O rive.js do pacote canvas tem cerca de 628 KB e o rive.wasm cerca de 2,2 MB sem compressão (versão 2.47.1 no npm), e os dois precisam chegar antes do primeiro frame. Os próprios recursos da página do Bubble estão carregando ao mesmo tempo, então um loader Rive raramente aparece antes de a página estar quase pronta.

O que funciona no lugar disso:

1. Mostre uma imagem estática (poster) do personagem no mesmo lugar enquanto a página carrega.
2. Troque pelo canvas do Rive quando o onLoad disparar (o elemento Javascript to Bubble do Toolbox pode alternar um custom state).
3. Use o humor loading para esperas que acontecem depois que a página está pronta: buscas, pagamentos, chamadas de IA, uploads.

Mantenha os loops calmos e curtos para que esperas longas não pareçam ainda mais longas; o guia de animação de carregamento fala sobre timing.

Como manter o canvas nítido e responsivo no Bubble?

Um canvas tem dois tamanhos: o tamanho CSS na página e o buffer de desenho. Se forem diferentes, a animação fica borrada ou achatada. O snippet define o tamanho CSS (largura total do elemento, proporção quadrada) e chama resizeDrawingSurfaceToCanvas() após o carregamento e a cada redimensionamento da janela, o que ajusta o buffer ao tamanho exibido e à densidade da tela.

• Nas configurações responsivas do Bubble, dê ao elemento HTML uma largura mínima e máxima em vez de um tamanho fixo em pixels, e deixe o aspect-ratio do wrapper definir a altura.
• Stretch to fit content permite que o elemento cresça com o conteúdo quando não está no modo iframe; use essa opção se o canvas ficar cortado.
• Repeating groups: cada célula precisa de um id de canvas único, por exemplo inserindo o índice da célula com dados dinâmicos. Muitos canvas ativos em uma lista pesam bastante; em listas longas, use um GIF ou poster por célula e mantenha um único personagem Rive em outro lugar da página.

Onde consigo um .riv pronto para o Bubble?

O Charmotion transforma uma única imagem de personagem, mascote ou logo em 17 animações: um .riv com um view model Character em CharacterViewModelMachine (um número mood mais os triggers success, error, yes, no, enter e exit), os inputs clássicos da CharacterStateMachine e uma curta intro de abertura. O mesmo conjunto inclui MP4, vídeo 9:16, GIF, WebM com fundo transparente e MOV HEVC, além de código para web, React e SwiftUI. Os snippets desta página usam esses nomes exatamente como são.

O .riv e o vídeo transparente vêm com todo plano pago (a partir de US$ 20/mês), junto com MP4, GIF e o vídeo de abertura 9:16 (fundo sólido), que também funcionam no Bubble por meio de uma tag de vídeo simples, quando não é preciso um personagem que reage.

Como adicionar uma animação Rive a um app Bubble

1. Envie o arquivo. Envie o .riv pelo gerenciador de arquivos da aba Data e copie a URL, acrescentando https: se ela começar com //.
2. Verifique o CORS. Execute o curl com um cabeçalho Origin e confirme que um cabeçalho access-control-allow-origin volta na resposta.
3. Adicione um elemento HTML. Coloque um elemento HTML, deixe a opção Display as an iFrame desmarcada e cole o snippet do canvas e do loader.
4. Prévia. Abra o app em modo de prévia, pois o Bubble só executa o script no modo de execução (run mode).
5. Instale o Toolbox. Adicione o plugin Toolbox e use passos Run javascript para definir o mood de window.mascot e disparar triggers.
6. Deixe responsivo. Defina larguras mínima e máxima, mantenha o contêiner quadrado e redimensione a superfície de desenho quando a janela for redimensionada.

Perguntas frequentes

Por que meu canvas Rive fica em branco no editor do Bubble?

O manual do Bubble diz que tags script em um elemento HTML só rodam no modo de execução, não no editor. A caixa vazia é esperada. Abra a prévia para ver a animação e, se ela ainda não aparecer, use o console do navegador ali: uma requisição do .riv que falhou ou um erro de script vai aparecer listado.

A opção Display as an iFrame impede que os workflows controlem a animação?

Sim, na prática. Com essa opção ativada, o Bubble executa o HTML como uma página independente, então window.mascot existe dentro do iframe, enquanto a ação Run javascript do Toolbox roda na página principal. Deixe a opção desativada para um personagem que você controla pelos workflows.

Por que minha animação Rive fica borrada no Bubble?

O buffer de desenho do canvas não corresponde ao tamanho exibido. Chame resizeDrawingSurfaceToCanvas() em onLoad e de novo quando a janela for redimensionada, e defina o tamanho do canvas com CSS em vez de atributos fixos de largura e altura diferentes do tamanho do elemento.

Cada usuário do Bubble pode ver um mascote diferente?

Sim. Guarde um .riv por usuário, equipe ou workspace em um campo de arquivo e insira esse campo no src do snippet usando os dados dinâmicos do elemento HTML. Mantenha a state machine e os nomes das propriedades idênticos em todos os arquivos para que os mesmos workflows controlem todas as versões.

Respostas rápidas deste guia

• Por que minha animação Rive não aparece no editor do Bubble?
• Como disparar uma animação Rive a partir de um workflow do Bubble?

Fontes

• Visual elements: HTML element, Bubble Manual
• Rive: interactive animations for Bubble, Bubble Forum
• Scripts not loaded synchronously?, Bubble Forum
• Toolbox plugin documentation (Run Javascript, Javascript to Bubble), Toolbox docs
• Web (JS) runtime, Rive
• Rive parameters (web runtime), Rive
• Web runtime: Data binding, Rive
• Preloading WASM, Rive