O Effective Lottie Animation (Lottie Animation Addon / Widget for Elementor & WordPress) é uma extensão e componente visual complementar para WordPress e Elementor, desenvolvido sob medida para designers de UI/UX, agências digitais, desenvolvedores front-end, empresas de tecnologia/SaaS e criadores de landing pages que precisam incorporar ilustrações e ícones vetoriais animados no formato leve Lottie (arquivos JSON), substituindo GIFs pesados ou vídeos em MP4 por animações vetoriais fluidas, escaláveis e com gatilhos de interação avançados sem necessidade de programar em JavaScript.
Destaques:
- Renderização Vetorial Leve em JSON (Lottie Player Engine): Utiliza o motor de execução do Lottie Web / Bodymovin para renderizar animações criadas no Adobe After Effects ou exportadas de repositórios como LottieFiles, entregando gráficos vetoriais nítidos em qualquer densidade de pixels (resoluções Retina/4K) com arquivos até 90% mais leves que formatos gráficos tradicionais como GIFs e vídeos.
- Integração Nativa com o Editor Visual do Elementor (Widget Dedicado): Adiciona um componente arrastar-e-soltar (drag-and-drop) diretamente ao painel lateral do Elementor, permitindo carregar animações por upload direto do arquivo
.jsonna biblioteca de mídia ou colar a URL externa da animação (remote JSON link), com todos os controles de reprodução disponíveis nas abas nativas de conteúdo e estilo. - Múltiplos Gatilhos e Mecanismos de Interatividade (Trigger Actions):
- Reprodução Automática (Autoplay / Loop): Executa a animação continuamente em repetição infinita ou define uma quantidade exata de loops antes de pausar;
- Animação Vinculada ao Cursor do Mouse (Hover / Mouse Move): Permite acionar a animação ao passar o cursor, pausar ao retirar o mouse, inverter o sentido do vídeo (reverse on hover out) ou sincronizar a linha do tempo da animação com a posição X/Y do ponteiro do mouse;
- Sincronização com o Scroll da Página (Scroll Sync / Viewport Trigger): A animação avança e recua proporcionalmente conforme o visitante rola a página para baixo ou para cima, ou dispara a reprodução apenas quando o bloco entra na área visível da tela (viewport entry);
- Disparo por Clique (Click Trigger): Alterna a reprodução a cada clique do usuário, ideal para botões com microinterações, alternadores de favoritos, ícones de menu hambúrguer ou confirmações de formulário;
- Ajuste Fino de Velocidade e Segmentação: Controles para definir a velocidade de reprodução (0.5x, 1x, 2x) e delimitar quadros específicos de início e fim (start/end frames), aproveitando um único arquivo JSON para múltiplos comportamentos.
- Recursos Avançados de Layout e Integração:
- Modos de Renderização Flexíveis: Opção de alternar entre renderizador SVG (máxima nitidez vetorial e compatibilidade de cores) ou Canvas (alta performance para animações muito complexas com grande quantidade de vetores móveis);
- Ações de Clique e Redirecionamento: O container da animação pode atuar como link dinâmico para URLs internas/externas, abrir imagens em lightbox ou disparar janelas modais/popups do Elementor;
- Substituição Dinâmica de Cores: Permite injetar filtros e propriedades CSS para recolorir camadas vetoriais da animação de acordo com a paleta de cores global do tema sem ter que editar o arquivo no After Effects.
- Estilização Visual e Controles de Exibição:
- Dimensionamento Proporcional Preciso: Controles para largura máxima, alinhamento horizontal (esquerda, centro, direita) e proporção de tela (aspect ratio), evitando saltos indesejados durante o carregamento (Cumulative Layout Shift – CLS);
- Efeitos Visuais de Moldura: Suporte a bordas sólidas, cantos arredondados, sombras de caixa (box shadows) e filtros de opacidade ou desfoque no estado normal ou no hover.