Como adicionar animações Rive e Lottie ao Framer

O Framer é compatível com Rive?

Sim, por meio de um plugin oficial publicado pelo Rive no Framer Marketplace. A descrição dele diz que o plugin "dá ao Framer suporte nativo ao formato Rive, o que significa que você pode arrastar e soltar um arquivo .riv diretamente no Framer", e que ele permite acessar os inputs da state machine do arquivo e controlá-los pelo Framer.

Então, ao contrário de um embed simples, a state machine continua funcionando: um personagem pode ficar em idle sozinho, e o Framer pode alterar um input para levá-lo a outro estado. Isso basta para a maioria dos sites de marketing, em que o personagem reage ao passar do mouse, a toques e às seções da página.

Duas coisas para saber antes de começar:

• O plugin funciona com inputs da state machine. Arquivos que só expõem propriedades de Data Binding precisam do caminho com componente de código descrito abaixo, então verifique qual sistema o seu arquivo usa.
• Dê nomes claros aos inputs no arquivo de origem. Você vai selecioná-los pelo nome dentro do Framer, e um número chamado mood é mais fácil de usar do que vários booleanos.

Como usar o plugin oficial do Rive?

1. Abra o Framer Marketplace, encontre o plugin Rive do Rive e abra-o no seu projeto.
2. Arraste seu arquivo .riv para o canvas.
3. Selecione o artboard e a state machine que você quer executar.
4. Dimensione a camada com uma proporção fixa igual à do artboard para que o personagem não seja cortado em breakpoints menores.
5. Defina os inputs que você quer controlar e conecte-os ao seu design, por exemplo, por meio de variantes de componente para os estados de hover e pressionado.

Com um personagem baseado em humor, uma configuração comum é um componente do Framer com algumas variantes, cada uma definindo um valor diferente de mood: idle (0) por padrão, happy (1) ao passar o mouse, attention (9) em uma seção que precisa de um empurrãozinho. Triggers como yes ou success combinam com toques em um call-to-action.

Confira a página do plugin para ver as opções atuais, já que interfaces de plugins mudam mais rápido que a documentação. Se faltar algum controle de que você precisa, o componente de código da última seção dá acesso total ao runtime.

O Framer é compatível nativamente com Lottie e dotLottie?

O Framer oferece componentes Lottie no menu Insert. Segundo um guia da LottieFiles, você clica em Insert, abre Media para encontrar os componentes de animação e adiciona um componente Lottie ou Dot Lottie, depois aponta para o seu arquivo. A LottieFiles descreve isso como suporte nativo; a central de ajuda do próprio Framer não documenta o recurso com o mesmo nível de detalhe, então confira o painel Insert no seu editor para ver as opções atuais.

Use Lottie para ilustrações que tocam do início ao fim ou em loop: uma cena na seção hero, um ícone animado, um desenho de estado vazio. Prefira .lottie a .json quando sua ferramenta de exportação oferecer essa opção, porque arquivos dotLottie são comprimidos e podem conter várias animações em um só arquivo.

Se a animação precisa alternar entre estados com base no que o visitante faz, o Rive costuma ser a opção mais simples, já que a lógica de troca fica na state machine do arquivo, e não no seu layout do Framer. Veja Rive vs Lottie para um comparativo mais completo.

Como adicionar um vídeo ou vídeo com fundo transparente no Framer?

O componente Video do Framer reproduz arquivos enviados, URLs de MP4 hospedados, YouTube e Vimeo. A central de ajuda do Framer observa que ele "otimiza o carregamento do vídeo, mas não otimiza nem comprime o conteúdo do vídeo em si", então exporte um arquivo pequeno e pronto para a web antes de enviar. Para loops de fundo, ative a reprodução automática, o mudo e o loop.

Vídeo com fundo transparente exige cuidado. Chrome, Edge e Firefox exibem o canal alfa de um WebM VP9, mas o Safari reproduz WebM opaco e precisa de um .mov HEVC com alfa. Por isso, um único arquivo enviado não consegue ser transparente em todos os navegadores. Para sobrepor um personagem ao seu design, use um embed ou componente de código que gere um <video> com as duas fontes, HEVC primeiro:

<video autoplay muted loop playsinline preload="metadata"
       width="400" height="400" poster="/mascot-poster.png">
  <!-- Safari: HEVC with alpha must come first -->
  <source src="/mascot.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
  <!-- Chrome, Edge, Firefox: VP9 with alpha -->
  <source src="/mascot.webm" type="video/webm; codecs=vp09.00.41.08">
</video>

Se a transparência não for essencial, um MP4 quadrado sobre um fundo da mesma cor da sua seção é a opção mais simples e funciona em qualquer lugar.

Seja o que for que você adicionar, pense nos visitantes que ativam o movimento reduzido. O Motion, a biblioteca de animação sobre a qual o Framer é construído, documenta que o Framer expõe o comportamento de movimento reduzido como uma configuração em Site Settings, depois Accessibility. Essa configuração cobre as transições do próprio Framer; ela não pausa um arquivo Rive nem um vídeo por você. Dê a um personagem em loop um estado idle tranquilo e, em um componente de código, verifique matchMedia("(prefers-reduced-motion: reduce)") e pule a reprodução automática quando houver correspondência.

Como mapear os humores do Rive para propriedades do Framer com código?

Os componentes de código do Framer são componentes React, então você pode usar o runtime React do Rive e expor o humor como um property control. Isso dá aos designers um controle deslizante no canvas e permite conectar a propriedade a variantes ou overrides.

import { addPropertyControls, ControlType } from "framer";
import { useEffect } from "react";
import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

const SM = "CharacterStateMachine";

export default function Mascot({ src, mood }: { src: string; mood: number }) {
  const { rive, RiveComponent } = useRive({ src, stateMachine: SM, autoplay: true });
  const moodInput = useStateMachineInput(rive, SM, "mood");

  useEffect(() => {
    if (moodInput) moodInput.value = mood;
  }, [moodInput, mood]);

  return <RiveComponent style={{ width: "100%", height: "100%" }} />;
}

addPropertyControls(Mascot, {
  src: { type: ControlType.File, allowedFileTypes: ["riv"] },
  mood: { type: ControlType.Number, min: 0, max: 9, step: 1, defaultValue: 0 },
});

A forma como os imports de pacotes são resolvidos em arquivos de código está explicada na documentação para desenvolvedores do Framer; consulte-a se o import do Rive não carregar. O Charmotion gera, a partir de um personagem enviado, um .riv com esse input mood (de 0, idle, até 9, attention) e os triggers success, error, yes, no, enter e exit, junto com código React que você pode adaptar aqui.

Como adicionar um personagem Rive a um site no Framer

1. Instale o plugin. Abra no seu projeto o plugin oficial do Rive, disponível no Framer Marketplace.
2. Adicione o arquivo. Arraste o .riv para o canvas e selecione o artboard e a state machine.
3. Dimensione a camada. Dê à camada uma proporção fixa igual à do artboard e teste todos os breakpoints.
4. Controle os inputs. Defina o número do humor ou os triggers a partir de variantes para os estados de hover, pressionado e de seção.
5. Use código para lógica personalizada. Para tudo o que o plugin não consegue expressar, envolva useRive em um componente de código com um property control de humor.

Perguntas frequentes

O plugin do Rive para Framer é oficial?

Sim. O plugin Rive no Framer Marketplace é publicado pelo Rive. Ele adiciona suporte a arrastar e soltar arquivos .riv e expõe os inputs da state machine do arquivo para que você possa controlá-los pelo Framer. Instale-o pelo Framer Marketplace e abra-o dentro do seu projeto para começar a arrastar arquivos .riv.

Por que meu WebM transparente fica preto no Safari, no Framer?

O Safari reproduz WebM, mas ignora o canal alfa. Forneça um .mov HEVC com alfa como primeira fonte e o WebM como segunda, usando um embed ou componente de código, ou use um arquivo Rive, que é renderizado em um canvas transparente em todos os principais navegadores e costuma ser menor que qualquer um dos dois vídeos.

O Framer comprime os vídeos enviados?

Não. A central de ajuda do Framer diz que ele otimiza o carregamento do vídeo, mas não otimiza nem comprime o conteúdo do vídeo em si. Codifique um MP4 ou WebM pequeno e pronto para a web antes de enviar, principalmente para loops de fundo com reprodução automática, que são baixados a cada visita à página.

Respostas rápidas deste guia

• O Framer é compatível com Rive e Lottie?

Fontes

• Rive plugin, Framer Marketplace
• Add Lottie JSON and dotLottie files to Framer, LottieFiles
• How to add video, Framer Help
• Framer developer documentation, Framer
• React accessibility: reduced motion, Motion
• React runtime, Rive
• Video with alpha transparency on the web, Jake Archibald