Plugins GSAP

Selecionado das habilidades oficiais do GSAP da GreenSock: https://github.com/greensock/gsap-skills

Quando Usar Esta Habilidade

Aplique ao usar ou revisar código que utiliza plugins GSAP: registrar plugins, scroll-to, animações flip/FLIP, elementos arrastáveis, SVG (DrawSVG, MorphSVG, MotionPath), texto (SplitText, ScrambleText), física, plugins de easing (CustomEase, EasePack, CustomWiggle, CustomBounce), ou GSDevTools. ScrollTrigger tem sua própria habilidade (gsap-scrolltrigger).

Habilidades relacionadas: Para tweens principais, use gsap-core; para ScrollTrigger, use gsap-scrolltrigger; para React, use gsap-react.

Licenciamento e Instalação (importante)

Todo plugin GSAP é gratuito, inclusive para uso comercial. Desde a aquisição do GSAP pela Webflow, o Club GSAP não é mais um nível pago e nenhum plugin requer assinatura, chave de licença ou token de autenticação — isso inclui plugins que antes eram exclusivos do Club (SplitText, MorphSVG, etc.).

• ✅ Instale tudo do pacote público gsap npm: npm install gsap. Todos os plugins estão incluídos — importe-os como gsap/SplitText, gsap/MorphSVGPlugin, etc.
• ❌ Não gere um .npmrc com um token de autenticação GreenSock, sugira o registro privado npm.greensock.com, ou diga aos usuários para se inscreverem no Club GSAP para acessar um plugin. Essas instruções estão desatualizadas.

Registrando Plugins

Registre cada plugin uma vez para que o GSAP (e os bundlers) saibam incluí-lo. Use gsap.registerPlugin() com cada plugin usado no projeto:

import gsap from "gsap";
import { ScrollToPlugin } from "gsap/ScrollToPlugin";
import { Flip } from "gsap/Flip";
import { Draggable } from "gsap/Draggable";

gsap.registerPlugin(ScrollToPlugin, Flip, Draggable);

• ✅ Registre antes de usar o plugin em qualquer tween ou chamada de API.
• ✅ Em React, registre no nível superior ou uma vez no aplicativo (por exemplo, antes do primeiro useGSAP); não registre dentro de um componente que é re-renderizado. useGSAP é um plugin que precisa ser registrado antes do uso.

Scroll

ScrollToPlugin

Anima a posição de rolagem (janela ou um elemento rolável). Use para "rolar para elemento" ou "rolar para posição" sem ScrollTrigger.

gsap.registerPlugin(ScrollToPlugin);

gsap.to(window, { duration: 1, scrollTo: { y: 500 } });
gsap.to(window, { duration: 1, scrollTo: { y: "#section", offsetY: 50 } });
gsap.to(scrollContainer, { duration: 1, scrollTo: { x: "max" } });

ScrollToPlugin — configuração principal (objeto scrollTo):

ScrollSmoother

Wrapper de rolagem suave (suaviza a rolagem nativa). Requer ScrollTrigger e uma estrutura DOM específica (wrapper de conteúdo + wrapper suave). Use quando for necessária rolagem suave, estilo momentum. Veja a documentação do GSAP para configuração; registre após ScrollTrigger. A estrutura DOM seria assim:

<body>
	<div id="smooth-wrapper">
		<div id="smooth-content">
			<!--- ALL YOUR CONTENT HERE --->
		</div>
	</div>
	<!-- position: fixed elements can go outside --->
</body>

DOM / UI

Flip

Capture o estado com Flip.getState(), aplique as alterações (por exemplo, alterações de layout ou de classe) e, em seguida, use Flip.from() para animar do estado anterior para o novo estado (FLIP: First, Last, Invert, Play). Use ao animar entre dois estados de layout (listas, grades, expandido/recolhido).

gsap.registerPlugin(Flip);

const state = Flip.getState(".item");
// change DOM (reorder, add/remove, change classes)
Flip.from(state, { duration: 0.5, ease: "power2.inOut" });

Flip — configuração principal (variáveis Flip.from):

Mais informações

https://gsap.com/docs/v3/Plugins/Flip

Draggable

Torna elementos arrastáveis, giráveis ou arremessáveis com mouse/toque. Use para sliders, cartões, listas reordenáveis ou qualquer interação de arrastar.

gsap.registerPlugin(Draggable, InertiaPlugin);


…