Como adicionar animação GSAP no elementor (modelo gratuito)

Você pode executar animação GSAP completa dentro do Elementor Revelações de texto dividido, rolagem horizontal fixada, paralaxe esfregada por rolagem, contadores, tudo isso, sem desenvolvimento de plugins e sem funções.edições de php, e seus clientes mantêm a capacidade de editar cada título e cor O truque é o Construtor de widgets em Master Addons: cole seu HTML, CSS e JS uma vez, marque o que deve ser editável e ele se tornará um widget Elementor normal que qualquer pessoa pode soltar em uma página e editar no painel.

Para provar isso, construí um modelo completo de pouso GSAP de uma página (um estúdio de movimento fictício chamado Playhead) e converti todas as seções em um widget importável Você pode baixe todos os seis widgets como um zip no final deste post, importe-os com alguns cliques e selecione-os para ver exatamente como funcionam.

Neste guia EU vou percorrer como EU construí o widget da seção herói passo a passo, depois resumir as outras cinco seções Se você já quis converter um design HTML/CSS/JS para Elementor, incluindo código que você gerou com ChatGPT ou Claude, este é o fluxo de trabalho.

Um atalho antes de começar: se o movimento desejado for uma linha de imagens que se move, talvez você não precise escrever o GSAP. Já enviamos 20 widgets carrossel e controle deslizante construído desta mesma forma (um deles gira os painéis laterais em 3 D, um descasca os cartões de uma pilha, um monta seus slides em torno de um aro curvo (rim) e cada um importa como um widget normal do Elementor que você edita do painel.

Oito deles são executados no plugin gratuito, doze precisam do Pro. Mesmo que nenhum seja uma correspondência exata, importar o mais próximo e ler o JS dentro dele supera a partir de um editor vazio, e as etapas de construção mais abaixo nesta postagem são o que transformam esse JS em controles.

O que é animação GSAP?

GSAP (GreenSock Animation Platform) biblioteca de animação JavaScript que anima qualquer coisa em uma webSock Animation Platform, imagens, CSS, propriedades SVG com quadro preciso timing e controle de flexibilização Ele alimenta os efeitos de rolagem e texto revela que você vê em sites premiados, e desde a versão 3.13 toda a biblioteca, incluindo plugins premium como ScrollTrigger e SplitText, é 100% livre.

Essa última parte importa mais do que as pessoas percebem O SplitText (o plugin que quebra manchetes em personagens animados individualmente) costumava custar mais de US $ 99 por ano atrás do paywall “Club GreenSock” Depois que o Webflow adquiriu o GSAP, tudo ficou livre Então a única barreira real que resta para os usuários do WordPress é a integração, e é isso que este post remove.

O Problema: Elementor Não Fala GSAP

Os efeitos de movimento integrados do Elementor cobrem animações de entrada, paralaxe básica e rastreamento do mouse Bom para 80% das páginas Mas eles não podem fazer:

• O texto dividido revela onde cada personagem se anima com seu próprio atraso
• Seções fixadas que rolam horizontalmente enquanto a página rola verticalmente
• Animação rolagem-esfregada amarrada à posição exata do rolagem (especialidade do ScrollTrigger)
• Linhas de tempo encadeadas onde uma animação passa para a próxima
• Efeitos reativos à velocidade, onde os elementos respondem à rapidez com que o visitante rola

As soluções alternativas usuais compartilham todas uma falha Você pode colar código em um widget HTML, mas então o texto do título vive dentro de um bloco de código seu cliente nunca ousará tocar Você pode instalar um plugin de animação específico para GSAP, mas você está limitado aos seus efeitos predefinidos Você pode enfileirar scripts à mão em seu tema filho, mas agora editar um título requer um desenvolvedor.

4 maneiras de adicionar animação GSAP ao elementor (em comparação)

Plugins predefinidos são genuinamente bons se um fade-on-scroll é tudo que você precisa O Widget Builder ganha quando você quer uma animação que ninguém mais tem, porque você (ou uma IA) escreveu-o Você faz o trabalho de código uma vez, liga as partes editáveis aos controles e, a partir de então, ele se comporta como qualquer widget Elementor de estoque: campos de texto, coletores de cores, controles de link, o lote.

O modelo gratuito: uma página inicial completa do GSAP como 6 widgets

Playhead é um site de uma página para um estúdio de movimento fictício Eu escolhi esse nicho de propósito: para um estúdio de movimento, a animação é o portfólio, então cada efeito ganha seu lugar A página é executada no GSAP 3.15 com ScrollTrigger e SplitText, carregados a partir do CDN oficial.

Os seis widgets no download:

1. Herói SplitRevelação de caracteres em texto, formas de diamante paralaxe, orbes luminosos à deriva, botões magnéticos
2. Marquise 0 ticker infinito que acelera quando o visitante rola mais rápido
3. Galeria Trabalho Rolo horizontal com cartão ao vivo e inclinação baseada em velocidade
4. Estatísticas 'Os espectadores que rolam de zero quando entram na janela de visualização
5. Processo 0 easing curvas que literalmente desenhar-se, cada um usando seu próprio GSAP facilidade
6. CTA revelador de texto dividido acionado por rolo com um botão magnético de e-mail

Cada widget é independente: CSS com escopo para que não possa colidir com seu tema, seu próprio carregador GSAP que busca a biblioteca uma vez, mesmo que todos os seis widgets estejam na mesma página, e fallbacks para que o conteúdo permaneça visível se as preferências de movimento reduzido também forem respeitadas Os visitantes que desligam as animações em seu sistema operacional obtêm uma página estática.

Como construí o widget de herói, passo a passo

Esta é a parte que generaliza para qualquer animação que você sempre vai querer Mesmos sete passos todas as vezes.

Etapa 1: comece trabalhando HTML, CSS e JS

A fonte pode ser qualquer coisa: uma CodePen que você admira, uma seção que você codificou ou saída de um bate-papo AI Meu herói era três arquivos a marcação, os estilos, script que constrói uma linha do tempo GSAP Antes de tocar no Widget Builder, certifique-se de que ele funciona como um arquivo.html simples em um navegador A depuração é 10 x mais fácil lá do que dentro de qualquer construtor de página.

Etapa 2: Escope tudo para uma classe de embalagem

Seu widget ficará em páginas com outros widgets, outros plugins e outros CSS. Enrole toda a seção em uma classe exclusiva e pendure cada seletor nela:

<section class="ph-hero-wrap">
  ...
</section>

/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }

Renomeie também os quadros-chave de animação genéricos. @keyframes spin torna-se @keyframes ph-hero-spin, então dois widgets em uma página nunca brigam pelo mesmo nome Esta única etapa impede que 90% do widget “my quebre os tickets de suporte page”.

Passo 3: Substitua o texto editável por tokens

Em qualquer lugar onde o proprietário de um site queira palavras diferentes, troque o texto codificado por um token em chaves duplas:

<h1 class="ph-title">
  <span class="ph-split">{{title_line_one}}</span>
  <span class="ph-split">{{title_line_two}}</span>
  <em class="ph-serif">{{accent_word}}</em>
</h1>

Observe que dividi os três tokens em vez de um A palavra de acento (“move” é estilizada de forma diferente em itálico ser âmbar, animado serif, assim que obtém seu próprio controle A pessoa que edita nunca precisa saber disso; eles apenas vêem três campos de texto rotulados Cada token se torna um Controle de texto no construtor.

Os botões recebem um controle de URL para que o link, a nova guia alternem e não sigam todo o trabalho do painel:

<a class="ph-btn" href="{{first_button_url.url}}"
   target="{{first_button_url.is_external}}"
   rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>

Passo 4: Transforme as cores da marca em controles de estilo

Resista ao desejo de fazer trinta controles de cores Meu herói tem cinco: fundo, texto, acento, primário e silenciado Eles alimentam variáveis CSS no wrapper, e cada cor derivada (brilhos, bordas, sombras) é computada a partir deles com color-mix():

.ph-hero-wrap {
  --ph-accent: {{accent_color}};
  --ph-primary: {{primary_color}};
  --ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}

Alterar “Primary” no Controle cor e o botão, o orbe de brilho e as formas de diamante atualizam-se todos juntos É isso que faz um widget parecer projetado em vez de montado.

Etapa 5: L L do CDNoad GSAP uma vez

O JS injeta os scripts GSAP com IDs protegidos, portanto, seis widgets em uma página ainda carregam a biblioteca exatamente uma vez:

["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st",   "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]

Então a animação em si é uma linha do tempo padrão GSAP Personagens subir com um escalonamento, a palavra de sotaque salta com back.out(2.5), os diamantes esfregam contra a posição de rolagem Se você já conhece o GSAP, nada muda Se você não o fizer, este é exatamente o código que uma IA escreverá alegremente para você (mais sobre isso abaixo).

Passo 6: Criar o Widget no Widget Builder

No seu painel WordPress: Complementos mestres → Construtor de widgets → Adicionar novo. Nomeie o widget, escolha um ícone e cole seus três arquivos nas guias HTML, CSS e JS.

Agora adicione um token de controle: 19 para meu herói 12 botões de sobrancelha textos, quatro campos de cabeçalho, a descrição, seus links, a dica de rolagem e cinco cores na guia Estilo O nome de controle deve corresponder exatamente ao token: o {{title_line_one}} token precisa de um controle nomeado title_line_one. A referência de controle total reside no Documentação do Widget Builder.

Um detalhe que vale a pena copiar: dê a cada controle de cor um padrão correspondente ao seu design Um widget que importa cinza porque seus controles de cor estavam vazios parece quebrado mesmo quando não está.

Etapa 7: solte-o no elementor e edite como qualquer widget

Publique o widget e ele aparece no painel Elementor em Master Addons Arraste-o para uma página, e o painel esquerdo mostra seus campos rotulados Alterar “Fazemos” para sua própria manchete, recolorir o acento, apontar os botões em sua página de preços A linha do tempo GSAP continua correndo por cada edição Essa é toda a promessa: complexidade de animação oculta, edição de conteúdo exposta.

As outras cinco seções, brevemente

Marquise (3 controles). O texto do ticker imprime duas vezes para um loop CSS sem intervalos, e o GSAP assume a reação à velocidade de rolagem Role rapidamente e acelera até 4 x, depois facilita o exemplo de ensino divertido porque o fallback é CSS puro: se o GSAP nunca carrega, ele ainda rola.

Galeria de Trabalho (22 controles). A peça de exibição. ScrollTrigger fixa os pinos da seção enquanto a faixa de cartas é traduzida horizontalmente, um contador marca 01/05 e as cartas são ligeiramente distorcidas com base na velocidade de rolagem Cinco cartas, cada uma com título, código de tempo e tags editáveis. No celular, ele se degrada em um carrossel de deslizamento nativo, sem fixação e sem necessidade de JS. Precisa de uma seção de largura total no Elementor para que a matemática dos pinos funcione.

Estatísticas (13 controles). Quatro números que contam com uma facilidade de exposição quando rolados para a vista Os números finais vivem na própria marcação, então mesmo com visitantes com JavaScript desativado veja “142”, não “0”.

Processo (20 controles). Meu conceito favorito na página: quatro etapas do processo, cada uma emparelhada com uma curva de flexibilização SVG que se desenha usando exatamente essa facilidade A curva linear desenha linearmente, a curva de back-out ultrapassa. As legendas do código são controles de texto editáveis, para que você possa trocar as referências GSAP por suas próprias descrições de etapas.

CTA (11 controles). Mesma técnica de split-text como o herói, mas acionado em scroll, além de um botão magnético que segue o cursor e volta com uma facilidade elástica Aponte o controle de URL em um link mailto: e é uma seção de contato.

Baixe o modelo (6 widgets, um zíper)

Baixar gsap-animation-elementor-widgets.zip 6 widget JSON grátis, sem portão de e-mail.

Uma nota antes de começar: a versão gratuita do Master Addons envia um Widget Builder limitado, e o conjunto completo de recursos que esses widgets usam vem com Master Addons Pro. Importar:

1. Descompacte o download você verá seis arquivos JSON, um por seção
2. Ir para Complementos mestres → Construtor de widgets no seu painel WordPress
3. Clique Importar, escolha um arquivo JSON e confirme
4. Repita para as seções que você deseja (você não precisa de todas as seis)
5. Abra qualquer página com o Elementor e arraste os widgets da categoria Master Addons

Tudo é editável após a importação: 88 controles nos seis widgets, cada cor, cada título, cada link Nenhuma imagem para fazer upload Todos os visuais são CSS e SVG, o que também mantém todo o modelo abaixo de 200 KB.

O ângulo de IA: converta qualquer design gerado em elementor

As ferramentas de IA escrevem código GSAP genuinamente bom Agora Pergunte ao ChatGPT ou Claude para a seção herói “a com revelação de texto dividido GSAP, fundo escuro, paralaxe de rolagem” e você obterá HTML, CSS e JS funcionando em uma resposta O problema sempre foi a última milha: esse código ficou preso como um arquivo estático, inútil para um cliente que edita no Elementor.

O Widget Builder é a última milha. Um padrão de prompt que funciona bem:

Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapper

Peça por essas quatro restrições na frente e a saída cai no Widget Builder quase inalterada Eu ainda o testaria como um arquivo HTML plano primeiro O código de IA geralmente funciona, mas “normalmente” não é uma palavra que você deseja descobrir dentro da página ao vivo de um cliente.

Desempenho: Mantenha a animação GSAP rápida

• Carregue a biblioteca uma vez. Os IDs de script protegidos da Etapa 5 lidam com isso automaticamente em vários widgets.
• Animar transformações e opacidadenão largura/altura/topo/esquerda. GSAP faz isso por padrão com x, y, e scale 0 compositor navegador lida com eles sem reflow.
• Respeito prefere movimento reduzido. Cada widget no modelo verifica-o e serve conteúdo estático Acessibilidade, mas também a duração da bateria.
• O custo total é pequeno. GSAP core + ScrollTrigger + SplitText é aproximadamente 90 KB minificado, menos do que a maioria das imagens de herói único Emparelhe o modelo com páginas enxutas e você passará Core Web Vitals confortavelmente; nosso guia de efeitos de animação cobre o quadro de velocidade mais amplo.

Se o GSAP parecer mais do que você precisa, o Master Addons também envia nenhum movimento de código da caixa entradas animações, efeitos flutuantes, e o sistema animação 0 setup zero. GSAP é para quando as predefinições deixam de ser suficientes.

Diretriz do tutorial em vídeo

Talvez você não prefira ler, então EU crio um vídeo para você sobre como baixar e instalar o widget com GSAP Animation em seu editor Elementor.

Perguntas frequentes

Comece com o modelo e depois construa o seu próprio

Importe os seis widgets, quebre-os, reconstrua-os A maneira mais rápida de entender o Widget Builder é abrir o widget herói após a importação e ver como 19 controles mapeiam para os tokens em sua guia HTML Depois disso, cada CodePen que você marca e cada seção gerada por IA se torna um candidato a widget.

Master Addons é executado em 30.000 + sites WordPress, e o Widget Builder completo é fornecido com a versão Pro Veja tudo incluído no página de widgets e extensões, baixe o modelo acima, e seu primeiro widget GSAP personalizado pode ser ao vivo hoje.