GSAP

GSAP (plate-forme d'animation Greensock)

GSAP est une bibliothèque d'animation JavaScript en framework-AGNOSCRIPTIQUE qui transforme les développeurs en super-héros d'animation. Construisez des animations hautes performances qui fonctionnent dans chaque navigateur majeur. Animer CSS, SVG, Canvas, React, Vue, WebGL, Couleurs, chaînes, chemins de mouvement, objets génériques ... tout ce que JavaScript peut toucher! Le plugin ScrollTrigger de GSAP fournit des animations basées sur un défilement à couper le souffle avec un code minimal. gsap.matchMedia () fait du bâtiment des animations sensibles et adaptées à l'accessibilité.

Aucune autre bibliothèque ne fournit un séquençage avancé, une fiabilité et un contrôle serré tout en résolvant des problèmes du monde réel sur plus de 12 millions de sites. GSAP travaille autour d'innombrables incohérences de navigateur; Vos animations fonctionnent . À la base, GSAP est un manipulateur de propriété à grande vitesse, mettant à jour les valeurs au fil du temps avec une précision extrême. C'est jusqu'à 20 fois plus vite que jQuery!

GSAP est complètement flexible; Saupoudrez-le où vous voulez. Zéro dépendances.

Il existe de nombreux plugins en option et des fonctions d'assouplissement pour réaliser facilement des effets avancés, comme le défilement, le morphing, l'animation le long d'un chemin de mouvement ou des animations de retournement. Il y a même un observateur pratique pour normaliser la détection d'événements entre les navigateurs / appareils.

Commencer

Docs et installation

Consultez la documentation complète ici, y compris un guide d'installation.

Monnaie

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

Voir la page GSAP dédiée de JSDelivr pour les liens CDN rapides vers les fichiers / plugins principaux. Il y a plus d'instructions d'installation sur GSAP.com.

Chaque réseau publicitaire majeur exclut GSAP des calculs de taille de fichier et la plupart l'ont sur leurs propres CDN, alors contactez-les pour les URL appropriées.

NPM

Voir le guide pour utiliser GSAP via NPM ici.

 npm install gsap

Le noyau de GSAP peut animer presque tout ce qui, y compris CSS et les attributs, et il comprend toutes les méthodes d'utilité comme Interpolate (), MapRange (), la plupart des cases, et il peut faire du claquement et des modificateurs.

 // 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 ) ; 

Les fichiers NPM sont des modules ES, mais il y a aussi un répertoire A / DIST / avec des fichiers UMD pour une compatibilité supplémentaire.

Téléchargez les plugins des membres du Club GSAP à partir de votre compte GSAP.com, puis incluez-les dans votre propre charge utile JS. Il y a même un fichier de tarball que vous pouvez installer avec NPM / YARN. GSAP possède également un registre privé NPM pour les membres. Publiez des questions dans nos forums et nous serions heureux de vous aider.

Scrolltrigger & ScrollsMoother

Si vous recherchez des animations pilotées par défilement, le plugin ScrollTrigger de GSAP est la nouvelle norme. Il y a aussi un compagnon Scrollsmoother.

Utiliser React?

Il y a un package @ gsap / react qui expose un crochet useGSAP() qui est un remplacement de dépôt pour useEffect() / useLayoutEffect() , automatiser les tâches de nettoyage. Veuillez lire le guide React pour plus de détails.

Ressources

• gsap.com
• Guide de démarrage
• Docs
• Démos et modèles de démarrage
• Forums communautaires
• Visualiseur d'assistance
• Vitrine
• Chaîne YouTube
• Feuille de triche
• Essayez les plugins bonus gratuitement
• Club GSAP (accédez à des plugins bonus sans restriction qui ne sont pas dans ce référentiel)

Qu'est-ce que le club GSAP?

Il y a 3 raisons principales pour lesquelles quiconque s'inscrit au club GSAP:

• Pour avoir accès aux plugins élégants des membres uniquement comme Morphsvg, SplitText, ScrollsMoother, etc.
• Pour obtenir la licence commerciale spéciale.
• Pour soutenir les efforts de développement en cours et nous encourager .

Apprendre encore plus.

Essayez tous les plugins bonus gratuitement!

https://gsap.com/trial

Besoin d'aide?

Demandez aux forums GSAP sympathiques. Ou partagez vos connaissances et aidez quelqu'un d'autre - c'est un excellent moyen d'aiguiser vos compétences! Signalez tous les bogues là-bas aussi (ou posez un problème ici si vous préférez).

Licence

La licence "No Charge" standard de Greensock peut être consultée sur https://gsap.com/standard-license. Les membres du club GSAP bénéficient de droits supplémentaires. Voir https://gsap.com/licensing/ pour plus de détails. Pourquoi GSAP n'utilise-t-il pas une licence open source du MIT (ou similaire), et pourquoi est-ce une bonne chose? Cet article explique tout: https://gsap.com/why-license/

Copyright (C) 2008-2023, Greensock. Tous droits réservés.