Rive e Lottie no Bubble, Wix Studio e Webflow

Quais plataformas no-code são compatíveis com Rive de forma nativa?

Entre as plataformas populares, Webflow e Wix Studio têm suporte oficial ao Rive; o Rive anunciou o suporte nativo ao Webflow no blog. O Framer é compatível com Rive por meio de um plugin do marketplace. O Wix Studio ganhou um elemento Rive nativo (envie o .riv e escolha o artboard e a state machine). O Bubble não tem elemento Rive nativo, mas pode rodar o runtime web do Rive por meio de um embed HTML. Para um passo a passo completo no Wix, veja como adicionar uma animação Rive ao Wix Studio.

Webflow e Framer têm guias próprios: Webflow e Framer. O FlutterFlow é abordado no guia do FlutterFlow. Esta página se concentra no Wix Studio e no Bubble.

Como adicionar uma animação Lottie no Wix Studio?

O Wix Studio tem um elemento nativo de animação Lottie. Adicione-o pelo painel Adicionar elementos e cole a URL da animação. A central de ajuda do Wix informa que só são aceitas URLs Lottie em formato JSON, então envie o arquivo para a LottieFiles (ou outro serviço que forneça uma URL JSON) e copie esse link. Um arquivo .lottie (dotLottie) não funciona nesse elemento.

As configurações do elemento controlam a reprodução, como o loop e o momento em que ela começa. Defina o tamanho no editor como em qualquer outro elemento e confira o breakpoint mobile separadamente, para que a animação não aperte o texto em telas pequenas.

No Wix, Lottie é a escolha certa para um loop decorativo: uma seção hero ilustrada, um divisor de seção, um ícone que anima ao carregar. Para um personagem que reage aos visitantes, como acenar na chegada e comemorar depois do envio de um formulário, você precisa da state machine do Rive, o que significa usar um embed.

Quando ainda preciso do elemento HTML iFrame para Rive no Wix?

O elemento Rive nativo do Wix Studio reproduz sozinho a state machine escolhida, o que cobre um loop idle ou uma animação que reage a cliques no canvas. Quando outros eventos da página (um envio de formulário, uma posição de rolagem) devem mudar a animação, use o elemento HTML iFrame (Incorporar): escolha a opção de código e cole um canvas com o runtime web do Rive. O Wix exige HTTPS para código incorporado, então hospede o .riv em um serviço de armazenamento ou CDN que sirva HTTPS e permita requisições cross-origin.

<canvas id="mascot" width="400" height="400"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.44.2"></script>
<script>
  const r = new rive.Rive({
    src: "https://cdn.example.com/character.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
    onLoad: () => {
      r.resizeDrawingSurfaceToCanvas();
      r.viewModelInstance.number("mood").value = 2; // wave
    },
  });
</script>

Fixe a versão do runtime, como acima, em vez de carregar a versão mais recente, para que uma atualização não altere seu site sem aviso. Ajuste o tamanho do elemento HTML ao do canvas, ou o personagem fica cortado.

O embed roda em um iframe isolado (sandbox), então o código dentro dele não consegue ler nem alterar outros elementos da página do Wix, e o Wix avisa que widgets que dependem disso não funcionam. Cliques no próprio canvas funcionam normalmente; adicione um listener que dispare um trigger, como r.viewModelInstance.trigger("yes").trigger(). Para reagir a eventos em outras partes da página, como o envio de um formulário, a plataforma de desenvolvimento Velo do Wix pode enviar mensagens para um elemento HTML com postMessage, e um listener de message dentro do embed pode definir o humor.

O plugin Rive para Bubble ainda recebe manutenção?

Aparentemente, não. O Rive anunciou um plugin para Bubble no fórum do Bubble em 31 de agosto de 2021. Em outubro de 2023, usuários no mesmo tópico perguntavam se ele ainda era mantido, e um moderador observou que o desenvolvedor não aparecia no fórum havia mais de dois anos. O plugin é totalmente anterior ao Data Binding do Rive.

Um caminho mais confiável é o elemento HTML do Bubble, que renderiza HTML e scripts personalizados na página. Cole o mesmo canvas e script mostrados na seção do Wix, com o .riv hospedado em HTTPS. Como o elemento fica diretamente na página, e não em um iframe, você também pode chamar o runtime a partir de workflows do Bubble usando um plugin que executa JavaScript, como o Toolbox. Guarde a instância em window (por exemplo, window.mascot = r) e execute window.mascot.viewModelInstance.number("mood").value = 5 quando um workflow começar.

Se o elemento HTML aparecer dentro de um repeating group ou de um elemento reutilizável, dê a cada canvas um id único para que várias instâncias não disputem o mesmo elemento.

Como usar o plugin da LottieFiles para Bubble?

A LottieFiles publica um plugin oficial para Bubble, anunciado no blog do Bubble em fevereiro de 2023. Instale-o pelo marketplace de plugins, arraste o elemento para a página e cole a URL JSON da animação Lottie. Segundo o Bubble, a configuração é tão simples quanto copiar e colar essa URL.

O plugin cobre os usos comuns do Lottie: um indicador de carregamento enquanto um workflow roda, uma animação de sucesso depois de um pagamento ou um estado vazio ilustrado. Mostre e oculte o elemento com as condicionais do Bubble, por exemplo, visível apenas enquanto um custom state como is_loading estiver como yes.

A limitação do Lottie é a mesma em qualquer lugar: um arquivo reproduz uma sequência. Se o seu mascote precisa acenar, esperar e comemorar, você vai empilhar vários elementos Lottie e alternar a visibilidade deles, ou passar a usar um único arquivo Rive em um elemento HTML.

Quando devo exportar MP4, GIF ou WebM?

Use vídeo quando a animação não precisar reagir. Qualquer plataforma reproduz um MP4 sem som e em loop sem plugins nem código, e um WebM com fundo transparente (mais um .mov HEVC com canal alfa para Safari) pode ficar sobre um fundo colorido. O GIF funciona em quase todo lugar, inclusive em e-mail, mas é mais pesado e limitado a 256 cores, com transparência de bordas serrilhadas.

• Vídeo: loops de seção hero, demonstrações de produto, um personagem reproduzindo um único clipe fixo.
• Lottie: loops vetoriais nítidos quando o tamanho do arquivo importa.
• Rive: um personagem que muda de estado conforme as ações do visitante.

O Charmotion exporta vídeo, GIF e Rive a partir de um único upload (não exporta Lottie): 17 animações do seu personagem ou logo em poucos minutos, como um único .riv com um view model Character (um número mood de 0 a 9 e os triggers success, error, yes, no, enter e exit) mais um index.html pronto com data binding. MP4, MP4 9:16, GIF e WebM e MOV transparentes são exportados sob demanda, em cerca de um minuto. O .riv, os WebM e MOV transparentes e o código exigem um plano pago (a partir de US$ 20 por mês).

O guia de vídeo com fundo transparente explica os detalhes do Safari.

Como adicionar um personagem Rive ao Wix Studio ou ao Bubble

1. Hospede o arquivo. Envie o .riv para um serviço de armazenamento ou CDN que sirva HTTPS com acesso cross-origin.
2. Adicione um embed. Adicione o elemento HTML iFrame do Wix Studio ou o elemento HTML do Bubble.
3. Cole o snippet. Cole um canvas e o script fixado @rive-app/canvas com stateMachine: "CharacterViewModelMachine" e autoBind: true.
4. Defina o tamanho do elemento. Ajuste o tamanho do embed ao do canvas em todos os breakpoints.
5. Conecte os eventos. Dispare triggers com cliques no canvas ou envie mensagens de workflows do Velo ou do Bubble para definir o humor.
6. Adicione um fallback. Use uma imagem de pôster ou um MP4 sem som onde scripts não são permitidos.

Perguntas frequentes

O Wix Studio reproduz arquivos .lottie?

Não no elemento nativo. A central de ajuda do Wix diz que o elemento Lottie só aceita URLs Lottie em formato JSON. Envie ou converta a animação para Lottie JSON, copie a URL dela na LottieFiles ou em outro serviço de hospedagem e cole no elemento. Para um arquivo .lottie, use um embed HTML com um player dotLottie.

Por que meu embed Rive não carrega no Wix?

Verifique três coisas: se a URL do .riv usa HTTPS, se o host permite requisições cross-origin a partir do embed e se o elemento HTML é grande o bastante para mostrar o canvas. Abra o console do navegador no site publicado, já que os erros dentro do iframe aparecem ali e geralmente indicam a requisição que falhou.

Um embed Rive prejudica o SEO?

Não por si só. Os buscadores indexam o texto e os títulos da sua página, não os pixels do canvas, então mantenha as palavras importantes em texto real ao lado da animação. Dê ao canvas um aria-label, defina o tamanho dele para evitar layout shift e evite que uma animação grande seja a primeira coisa a carregar.

Respostas rápidas deste guia

• Como adicionar Rive a um site Wix?
• Existe um plugin Rive para o Bubble?

Fontes

• Studio Editor: Adding and setting up a Rive animation, Wix Help Center
• Studio Editor: Adding and customizing Lottie animation files, Wix Help Center
• Studio Editor: Adding an HTML iFrame element, Wix Help Center
• Rive: interactive animations for Bubble, Bubble Forum
• LottieFiles Bubble plugin, Bubble
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive