GSAP es una biblioteca de animación de JavaScript de marco y agnóstico que convierte a los desarrolladores en superhéroes de animación. Construya animaciones de alto rendimiento que funcionen en cada navegador importante. Animate CSS, SVG, Canvas, React, Vue, WebGL, colores, cadenas, rutas de movimiento, objetos genéricos ... ¡cualquier cosa que JavaScript pueda tocar! El complemento ScrollTrigger de GSAP ofrece animaciones basadas en desplazamiento asombroso con un código mínimo. GSAP.MatchMedia () hace que las animaciones de accesibilidad y receptivas al edificio sean muy fáciles.
Ninguna otra biblioteca ofrece una secuencia tan avanzada, confiabilidad y control estricto al tiempo que resuelve problemas del mundo real en más de 12 millones de sitios. GSAP trabaja alrededor de innumerables inconsistencias del navegador; Tus animaciones solo funcionan . En esencia, GSAP es un manipulador de propiedades de alta velocidad, actualizando los valores con el tiempo con extrema precisión. ¡Es hasta 20 veces más rápido que jQuery!
GSAP es completamente flexible; Espolvorea donde quieras. Cero dependencias.
Hay muchos complementos opcionales y funciones de flexión para lograr efectos avanzados fácilmente como desplazarse, transformarse, animar a lo largo de una ruta de movimiento o animaciones de flip. Incluso hay un observador útil para normalizar la detección de eventos en los navegadores/dispositivos.
Vea la documentación completa aquí, incluida una guía de instalación.
< script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js " > </ script >
Consulte la página GSAP dedicada de JSDELIVR para enlaces rápidos de CDN a los archivos/complementos principales. Hay más instrucciones de instalación en GSAP.com.
Cada red de anuncios principales excluye GSAP de los cálculos del tamaño del archivo y la mayoría lo tiene en sus propios CDN, por lo tanto, contáctelos para obtener las URL apropiadas.
Vea la guía para usar GSAP a través de NPM aquí.
npm install gsap
El núcleo de GSAP puede animar casi cualquier cosa, incluyendo CSS y atributos, además incluye todos los métodos de utilidad como interpolato (), Maprange (), la mayoría de las facilidades, y puede hacer un roto y 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 ) ;
Los archivos NPM son módulos ES, pero también hay un directorio A / Dist / con archivos UMD para una compatibilidad adicional.
Descargue complementos de solo miembros de Club GSAP desde su cuenta GSAP.com y luego incluya en su propia carga útil JS. Incluso hay un archivo de tarball que puede instalar con npm/hilo. GSAP también tiene un registro privado de NPM para los miembros. Publique preguntas en nuestros foros y estaríamos encantados de ayudar.
Si está buscando animaciones basadas en desplazamiento, el complemento ScrollTrigger de GSAP es el nuevo estándar. También hay un compañero Scrollsmoother.
Hay un paquete @GSAP / React que expone un gancho useGSAP()
que es un reemplazo de uso de useEffect()
/ useLayoutEffect()
, automatizando tareas de limpieza. Lea la Guía React para obtener más detalles.
Hay 3 razones principales por las que cualquiera se inscribe en Club GSAP:
Aprende más.
https://gsap.com/trial
Pregunte en los amigables foros de GSAP. O comparta su conocimiento y ayude a otra persona: ¡es una excelente manera de agudizar sus habilidades! Informe cualquier error allí también (o presente un problema aquí si lo prefiere).
La licencia estándar de "sin cargo" de Greensock se puede ver en https://gsap.com/standard-license. Los miembros del Club GSAP tienen derechos adicionales. Consulte https://gsap.com/licensing/ para más detalles. ¿Por qué GSAP no usa una licencia de código abierto MIT (o similar), y por qué es algo bueno ? Este artículo lo explica todo: https://gsap.com/why-license/
Copyright (c) 2008-2023, Greensock. Reservados todos los derechos.