GSAP

GSAP (Greensock Animationsplattform)

GSAP ist eine Framework-Agnostic JavaScript-Animationsbibliothek, die Entwickler in Animations-Superhelden verwandelt. Bauen Sie Hochleistungsanimationen auf, die in jedem großen Browser funktionieren. Animate CSS, SVG, Canvas, React, Vue, WebGL, Farben, Zeichenfolgen, Bewegungspfade, generische Objekte ... alles, was JavaScript berühren kann! Das Scrolltrigger-Plugin von GSAP liefert mit minimalem Code mit minimalem Code basierende scrollbasierte Animationen. GSAP.Matchmedia () macht reaktionsschnelle, zugängliche Animationen zu einem Kinderspiel.

Keine andere Bibliothek liefert eine solche fortschrittliche Sequenzierung, Zuverlässigkeit und strenge Kontrolle, während reale Probleme an über 12 Millionen Standorten gelöst werden. GSAP arbeitet um unzählige Browser -Inkonsistenzen. Ihre Animationen funktionieren einfach . GSAP ist im Kern ein Hochgeschwindigkeits-Immobilienmanipulator, der die Werte im Laufe der Zeit mit extremer Genauigkeit aktualisiert. Es ist bis zu 20x schneller als JQuery!

GSAP ist völlig flexibel; Streuen Sie es, wo immer Sie wollen. Null Abhängigkeiten.

Es gibt viele optionale Plugins und Lockerungsfunktionen, um fortgeschrittene Effekte wie Scrollen, Morphing, Animationen entlang eines Bewegungspfads oder Flip -Animationen zu erreichen. Es gibt sogar einen praktischen Beobachter für die Normalisierung der Ereigniserkennung auf Browsern/Geräten.

Fangen an

Dokumente & Installation

Sehen Sie sich die vollständige Dokumentation hier an, einschließlich eines Installationshandbuchs.

CDN

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

In der dedizierten GSAP -Seite von JSDelivr finden Sie schnelle CDN -Links zu den Kerndateien/Plugins. Bei GSAP.com finden Sie weitere Installationsanweisungen.

Jedes Haupt -AD -Netzwerk schließt GSAP von Dateigrößenberechnungen aus und die meisten haben es auf seinen eigenen CDNs. Wenden Sie sich also an sie für die entsprechenden URL (en).

NPM

In der Anleitung zur Verwendung von GSAP über NPM finden Sie hier.

 npm install gsap

Der Kern von GSAP kann fast alles animieren, einschließlich CSS und Attribute sowie alle Nutzungsmethoden wie Interpolat (), MapRange (), die meisten Lächer, und es kann Schnapp- und Modifikatoren durchführen.

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

Die NPM -Dateien sind ES -Module, aber es gibt auch ein / dist / dist / verzeichnis mit UMD -Dateien für zusätzliche Kompatibilität.

Laden Sie Club GSAP-Mitglieder-Plugins nur von Ihrem GSAP.com-Konto herunter und fügen Sie sie dann in Ihre eigene JS-Nutzlast ein. Es gibt sogar eine Tarballdatei, die Sie mit NPM/Garn installieren können. GSAP hat auch ein privates NPM -Register für Mitglieder. Fragen Sie Fragen in unseren Foren und wir helfen gerne.

Scrolltrigger & Scrollsmoother

Wenn Sie nach scrollgesteuerten Animationen suchen, ist das Scrolltrigger-Plugin von GSAP der neue Standard. Es gibt auch einen Begleiter.

Verwenden von React?

Es gibt ein @GSAP / React-Paket, das einen useGSAP() -Haken enthüllt, der ein Drop-In-Ersatz für useEffect() / useLayoutEffect() ist, wobei die Bereinigungsaufgaben automatisiert werden. Bitte lesen Sie den React -Handbuch für Details.

Ressourcen

• gsap.com
• Erste Schritte
• Dokumente
• Demos und Startervorlagen
• Community -Foren
• Leichter Visualizer
• Showcase
• YouTube -Kanal
• Cheat Sheet
• Probieren Sie Bonus -Plugins kostenlos aus
• Club GSAP (Erhalten Sie Zugang zu uneingeschränkten Bonus -Plugins, die nicht in diesem Repository enthalten sind)

Was ist Club GSAP?

Es gibt 3 Hauptgründe, warum sich jemand für Club GSAP anmeldet:

• Um Zugriff auf schnelle Plugins nur für Mitglieder wie Morphsvg, Splittext, Scrollsmoother usw. zu erhalten, usw.
• Um die spezielle kommerzielle Lizenz zu erhalten.
• Zu unterstützen, um die kontinuierlichen Entwicklungsbemühungen zu unterstützen und uns anzufeuern .

Erfahren Sie mehr.

Probieren Sie alle Bonus -Plugins kostenlos aus!

https://gsap.com/trial

Benötigen Sie Hilfe?

Fragen Sie in den freundlichen GSAP -Foren. Oder teilen Sie Ihr Wissen und helfen Sie jemand anderem - es ist eine großartige Möglichkeit, Ihre Fähigkeiten zu schärfen! Melden Sie dort auch Fehler (oder stellen Sie hier ein Problem ein, wenn Sie es vorziehen).

Lizenz

Die Standard-Lizenz von Greensock kann unter https://gsap.com/standard-license angezeigt werden. Club GSAP -Mitglieder erhalten zusätzliche Rechte. Weitere Informationen finden Sie unter https://gsap.com/licensing/. Warum verwendet GSAP keine MIT (oder ähnliche) Open -Source -Lizenz und warum ist das eine gute Sache? Dieser Artikel erklärt alles: https://gsap.com/why-license/

Copyright (C) 2008-2023, Greensock. Alle Rechte vorbehalten.