GSAP

GSAP (Plataforma de Animação Greensock)

O GSAP é uma biblioteca de animação JavaScript -Framework-Agnóstica que transforma os desenvolvedores em super-heróis de animação. Construa animações de alto desempenho que funcionam em todos os principais navegadores. CSS animado, SVG, tela, reação, vue, webgl, cores, cordas, caminhos de movimento, objetos genéricos ... qualquer coisa que JavaScript possa tocar! O plug-in ScrollTrigger do GSAP entrega animações baseadas em rolagem de cair o queixo com código mínimo. GSAP.matchmedia () facilita a construção de animações responsivas e amigáveis ​​à acessibilidade.

Nenhuma outra biblioteca oferece um seqüenciamento, confiabilidade e controle rígido avançado, enquanto resolve problemas no mundo real em mais de 12 milhões de sites. O GSAP funciona em torno de inúmeras inconsistências do navegador; Suas animações apenas funcionam . Na sua essência, o GSAP é um manipulador de propriedade de alta velocidade, atualizando valores ao longo do tempo com extrema precisão. É até 20x mais rápido que o jQuery!

O GSAP é completamente flexível; Polvilhe onde quiser. Zero dependências.

Existem muitos plugins opcionais e funções de aliviação para alcançar efeitos avançados facilmente, como rolagem, transformar -se, animar -se ao longo de um caminho de movimento ou animações de flip. Existe até um observador útil para normalizar a detecção de eventos entre navegadores/dispositivos.

Comece

DOCs e instalação

Veja a documentação completa aqui, incluindo um guia de instalação.

CDN

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js " > </ script >

Consulte a página GSAP dedicada do JSDELIVR para links de CDN rápido para os arquivos/plug -ins do núcleo. Existem mais instruções de instalação no GSAP.com.

Cada rede de anúncios principal exclui o GSAP dos cálculos de tamanho de arquivo e a maioria os possui em seus próprios CDNs; portanto, entre em contato com os URL (s) apropriados.

Npm

Consulte o guia para usar o GSAP via NPM aqui.

 npm install gsap

O núcleo do GSAP pode animar quase qualquer coisa, incluindo CSS e atributos, além de incluir todos os métodos de utilitário como interpolate (), mapRange (), a maioria das faces e pode fazer snap e modificadores.

 // typical import
import gsap from "gsap" ;

// get other plugins:
import ScrollTrigger from "gsap/ScrollTrigger" ;
import Flip from "gsap/Flip" ;
import Draggable from "gsap/Draggable" ;

// or all tools are exported from the "all" file (excluding members-only plugins):
import { gsap , ScrollTrigger , Draggable , MotionPathPlugin } from "gsap/all" ;

// don't forget to register plugins
gsap . registerPlugin ( ScrollTrigger , Draggable , Flip , MotionPathPlugin ) ; 

Os arquivos NPM são módulos ES, mas também há A / Dist / Diretório com arquivos UMD para compatibilidade extra.

Faça o download dos plugins somente para membros do Club GSAP da sua conta GSAP.com e inclua-os em sua própria carga JS. Existe até um arquivo de tarball que você pode instalar com o NPM/YARN. O GSAP também possui um registro privado de NPM para membros. Publique perguntas em nossos fóruns e ficaríamos felizes em ajudar.

ScrollTrigger & ScrollSmoother

Se você está procurando animações acionadas por rolagem, o plug-in ScrollTrigger do GSAP é o novo padrão. Há um companheiro rollsmother também.

Usando react?

Há um pacote @GSAP / React que expõe um gancho useGSAP() que é um substituto de queda para useEffect() / useLayoutEffect() , automatizando tarefas de limpeza. Leia o Guia do React para obter detalhes.

Recursos

• gsap.com
• Guia de início
• Documentos
• Demos e modelos iniciantes
• Fóruns da comunidade
• Facilitar o visualizador
• Showcase
• Canal do youtube
• Folha de dicas
• Tente plugins de bônus gratuitamente
• Club GSAP (Obtenha acesso a plugins de bônus irrestritos que não estão neste repositório)

O que é o Club GSAP?

Existem três razões principais pelas quais alguém se inscreve no Club GSAP:

• Para ter acesso a plugins apenas de membros da Snazzy, como Morphsvg, SplittExt, ScrollSmoother, etc.
• Para obter a licença comercial especial.
• Para apoiar os esforços de desenvolvimento em andamento e nos animar .

Saber mais.

Experimente todos os plugins de bônus gratuitamente!

https://gsap.com/trial

Precisar de ajuda?

Pergunte nos fóruns amigáveis ​​do GSAP. Ou compartilhe seu conhecimento e ajude outra pessoa - é uma ótima maneira de aprimorar suas habilidades! Relate todos os bugs lá também (ou arquive um problema aqui, se preferir).

Licença

A licença padrão "sem carga" da Greensock pode ser visualizada em https://gsap.com/standard-license. Os membros do Club GSAP recebem direitos adicionais. Consulte https://gsap.com/licensing/ para obter detalhes. Por que o GSAP não usa uma licença de código aberto do MIT (ou similar) e por que isso é uma coisa boa ? Este artigo explica tudo: https://gsap.com/why-license/

Copyright (C) 2008-2023, Greensock. Todos os direitos reservados.