So fügen Sie GSAP-Animation in Elementor hinzu (kostenlose Vorlage)

Sie können die vollständige GSAP-Animation innerhalb von Elementor ausführen. Split-text enthüllt, pinned horizontal scroll, scroll-scrubbed parallax, counters, all das, ohne Plugin-Entwicklung und ohne Funktionen.php-Bearbeitungen, und Ihre Clients behalten die Möglichkeit, jede Überschrift und Farbe zu bearbeiten Der Trick ist der Widget-builder In Master-Addons: Fügen Sie einmal Ihren HTML-, CSS- und JS-Code ein, markieren Sie, was bearbeitbar sein soll, und es wird zu einem normalen Elementor-Widget, das jeder auf einer Seite ablegen und im Panel bearbeiten kann.

Um es zu beweisen, habe ich eine komplette einseitige GSAP-Landing-Vorlage (ein fiktives Motion Studio namens Playhead) gebaut und jeden Abschnitt in ein importables Widget umgewandelt Du kannst Laden Sie alle sechs Widgets als einen Zip herunter Am Ende dieses Beitrags importieren Sie sie mit ein paar Klicks und wählen sie aus, um genau zu sehen, wie sie funktionieren.

In diesem Ratgeber gehe ich Schritt für Schritt durch, wie ich das Hero-Section-Widget aufgebaut habe, fasse dann die anderen fünf Abschnitte zusammen, falls ihr schon einmal ein HTML/CSS/JS-Design in Elementor konvertieren wolltet, inklusive Code, den ihr mit ChatGPT oder Claude generiert habt, ist das der Workflow.

Eine Abkürzung, bevor Sie beginnen: wenn die Bewegung, die Sie wollen, eine Reihe von Bildern ist, die sich bewegt, müssen Sie möglicherweise gar nicht den GSAP schreiben Wir haben bereits versendet 20 Karussell- und Schieberegler-Widgets Auf die gleiche Weise gebaut – man dreht Seitenwände in 3D, einer zieht Karten von einem Stapel, einer fährt seine Folien um einen gebogenen Rand – und jeder importiert als normales Elementor-Widget, das Sie aus dem Panel bearbeiten.

Acht davon laufen auf dem kostenlosen Plugin, zwölf brauchen Pro. Auch wenn keines genau übereinstimmt, importieren Sie das nächstgelegene und lesen Sie die darin enthaltenen JS-Beats ausgehend von einem leeren Editor, und die Build-Schritte weiter unten in diesem Beitrag sind die Wende JS in Steuerelemente.

Was ist GSAP Animation?

GSAP (GreenSock Animation Platform) ist eine Animationsbibliothek mit JavaScript, die alles auf einer Webseite animiert. JavaSS, Bilder, SVSS-Eigenschaften mit SV-Frame-genauer Zeitsteuerung und einfacher Steuerung. Sie unterstützt die Scroll-Effekte und Textanzeigen, die Sie auf preisgekrönten Websites sehen, und seit Version 3.13 ist die gesamte Bibliothek, einschließlich Premium-Plugins wie ScrollTrigger und SplitText, 100% kostenlos.

Dieser letzte Teil ist wichtiger, als den Leuten bewusst ist SplitText (das Plugin, das Schlagzeilen in individuell animierte Charaktere zerlegt) kostete früher hinter der Paywall “Club GreenSock” $99+ pro Jahr, nachdem Webflow GSAP übernommen hatte, ging alles kostenlos Die einzige wirkliche Barriere, die WordPress-Nutzern bleibt, ist die Integration, und das entfernt dieser Beitrag.

Das Problem: Elementor spricht kein GSAP

Die integrierten Motion-Effekte von Elementor umfassen Eingangsanimationen, grundlegende Parallaxe und Mausverfolgung. Gut für 80% der Seiten. Aber sie können nicht:

• Split-Text zeigt an, wo jeder Charakter mit seiner eigenen Verzögerung animiert
• Gepinnte Abschnitte, die horizontal scrollen, während die Seite vertikal scrollt
• Scroll-scrubbed Animation gebunden an exakte Scrollposition (Spezialität von ScrollTrigger)
• Verkettete Zeitleisten, bei denen eine Animation an die nächste übergeht
• Geschwindigkeitsreaktive Effekte, bei denen Elemente darauf reagieren, wie schnell der Besucher scrollt

Die üblichen Workarounds teilen alle einen Fehler. Sie können Code in ein HTML-Widget einfügen, aber dann lebt der Überschriftstext in einem Codeblock, den Ihr Client niemals berühren darf. Sie können ein GSAP-spezifisches Animations-Plugin installieren, sind aber auf seine voreingestellten Effekte beschränkt. Sie können Skripte von Hand in Ihrem untergeordneten Theme inqueuen, aber jetzt erfordert das Bearbeiten einer Überschrift einen Entwickler.

4 Möglichkeiten, GSAP-Animation zum Elementor hinzuzufügen (im Vergleich)

Voreingestellte Plugins sind wirklich in Ordnung, wenn ein Fade-on-Scroll alles ist, was Sie brauchen Der Widget Builder gewinnt, wenn Sie eine Animation haben möchten, die niemand sonst hat, weil Sie (oder eine KI) sie geschrieben haben Sie erledigen die Codearbeit einmalig, verkabeln die bearbeitbaren Teile mit Steuerelementen, und ab dann verhält es sich wie jedes Standard-Elementor-Widget: Textfelder, Farbwähler, Linksteuerungen, das Los.

Die kostenlose Vorlage: Eine vollständige GSAP-Landing-Seite als 6 Widgets

Playhead ist eine einseitige Seite für ein fiktives Motion Studio. Ich habe diese Nische absichtlich ausgewählt: für ein Motion Studio, die Animation ist Das Portfolio, so verdient jeder Effekt seinen Platz Die Seite läuft auf GSAP 3.15 mit ScrollTrigger und SplitText, geladen vom offiziellen CDN.

Die sechs Widgets im Download:

1. Held Drift-TasterText-Zeichen-Enthüllung, Parallaxen-Rautenformen, Glühkugeln, Magnetknöpfe
2. Festzelt „Unendlicher Ticker, der schneller wird, wenn der Besucher schneller scrollt
3. Werkgalerie Horizontale Bildlaufleiste mit Live-Karte und geschwindigkeitsbasiertem Kartenschiefstand
4. Statistiken Zähler, die von Null aufrollen, betreten den Aussichtspunkt
5. Prozess Lockern Sie Kurven, die buchstäblich zeichnen, wobei jeder seine eigene GSAP-Leichtheit nutzt
6. CTA Split-Text-Enthüllung mit einem magnetischen E-Mail-Button

Jedes Widget ist in sich geschlossen: Scoped CSS, damit es nicht mit Ihrem Theme kollidieren kann, ein eigener GSAP-Loader, der die Bibliothek einmal abruft, auch wenn alle sechs Widgets auf derselben Seite sitzen, und Fallbacks, damit der Inhalt sichtbar bleibt, falls das CDN jemals ausfällt Auch Reduced-Motion-Präferenzen werden respektiert Besucher, die Animationen in ihrem Betriebssystem ausschalten, erhalten eine statische Seite.

Wie ich das Helden-Widget gebaut habe, Schritt für Schritt

Dies ist der Teil, der sich verallgemeinert Irgendwelche Animation, die Sie sich jemals wünschen werden Jedes Mal die gleichen sieben Schritte.

Schritt 1: Beginnen Sie mit der Arbeit mit HTML, CSS und JS

Die Quelle kann alles sein CodePen, den Sie bewundern, ein Abschnitt, den Sie codiert, oder von einem KI-Chat-Helden ausgegeben haben, war drei Dateien Mein Markup, die Stile, Skript, das eine GSAP-Zeitleiste erstellt Bevor Sie den Widget Builder berühren, stellen Sie sicher, dass es als einfache .html-Datei in einem Browser funktioniert Debuggen ist dort 10 x einfacher als in jedem Seiten-Builder.

Schritt 2: Alles auf eine Wrapper-Klasse übertragen

Ihr Widget wird auf Seiten mit anderen Widgets, anderen Plugins und anderen CSS-Geräten leben. Verpacken Sie den gesamten Abschnitt in eine einzigartige Klasse und hängen Sie jeden Selektor daran:

<section class="ph-hero-wrap">
  ...
</section>

/* every rule starts with the wrapper */
.ph-hero-wrap .ph-title { font-size: clamp(3rem, 10.5vw, 8.6rem); }
.ph-hero-wrap .ph-btn-solid { background: var(--ph-primary, #5551f0); }

Benennen Sie auch generische Animations-Keyframes um. @keyframes spin wird @keyframes ph-hero-spin„Damit sich nie zwei Widgets auf einer Seite um denselben Namen streiten.“Dieser einzige Schritt verhindert, dass 90% der „mein Widget die Seite kaputt gemacht hat”-Supporttickets unterstützt.

Schritt 3: Ersetzen Sie bearbeitbaren Text durch Token

Überall dort, wo ein Websitebesitzer möglicherweise andere Wörter möchte, tauschen Sie den fest codierten Text gegen ein Token in doppelt geschweiften Klammern aus:

<h1 class="ph-title">
  <span class="ph-split">{{title_line_one}}</span>
  <span class="ph-split">{{title_line_two}}</span>
  <em class="ph-serif">{{accent_word}}</em>
</h1>

Beachten Sie, dass ich die drei Token aufteile, anstatt einen Das Akzentwort (“verschieben) ist anders gestylt it ist amber, amitierte Überschrift” so bekommt es seine eigene Kontrolle Die Person, die bearbeitet, muss das nie wissen; sie sehen nur drei beschriftete Textfelder Jeder Token wird ein Textkontrolle Im Bauherren.

Schaltflächen erhalten eine URL-Steuerung, sodass der Link, die neue Registerkarte umgeschaltet werden und alle Arbeiten aus dem Panel nicht verfolgt werden:

<a class="ph-btn" href="{{first_button_url.url}}"
   target="{{first_button_url.is_external}}"
   rel="{{first_button_url.nofollow}}">{{first_button_text}}</a>

Schritt 4: Markenfarben in Stilsteuerungen umwandeln

Widerstehen Sie dem Drang, dreißig Farbkontrollen durchzuführen. Mein Held hat fünf: Hintergrund, Text, Akzent, Primär und Gedämpft. Sie füttern CSS-Variablen auf dem Wrapper, und jede abgeleitete Farbe (Glühen, Ränder, Schatten) wird daraus berechnet color-mix():

.ph-hero-wrap {
  --ph-accent: {{accent_color}};
  --ph-primary: {{primary_color}};
  --ph-glow-primary: color-mix(in srgb, var(--ph-primary, #5551f0) 22%, transparent);
}

“Primary” in der ändern Farbsteuerung Und die Taste, die Glühkugel und die Rautenformen aktualisieren sich alle gemeinsam. Das ist es, was ein Widget so anfühlt, als wäre es entworfen statt zusammengebaut.

Schritt 5: Laden Sie GSAP einmal vom CDN

Das JS schiebt den GSAP-Skripten geschützte IDs ein, so dass sechs Widgets auf einer Seite die Bibliothek immer noch genau einmal laden:

["ph-gsap-core", "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"],
["ph-gsap-st",   "https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"],
["ph-gsap-split","https://cdn.jsdelivr.net/npm/gsap@3.15/dist/SplitText.min.js"]

Dann ist die Animation selbst eine Standard-GSAP-Zeitleiste Charaktere steigen mit einem Staffelung auf, das Akzentwort poppt mit back.out(2.5)2, die Diamanten schrubben gegen Scrollposition Wenn du GSAP schon kennst, ändert sich nichts, wenn nicht, ist das genau der Code, den eine KI gerne für dich schreiben wird (mehr dazu weiter unten).

Schritt 6: Erstellen Sie das Widget im Widget Builder

In Ihrem WordPress-Dashboard: Master-Addons → Widget Builder → Neu hinzufügen. Benennen Sie das Widget, wählen Sie ein Symbol aus und fügen Sie dann Ihre drei Dateien in die Registerkarten HTML, CSS und JS ein.

Fügen Sie nun pro Token eine hinzu: 19 für meinen Helden steuern Sie die Augenbrauentexte, vier Überschriftenfelder, die Beschreibung, zwei Schaltflächen mit ihren Links, den Roll-Cue und die Farben auf der Registerkarte Stil. Der Steuername muss genau mit dem Token übereinstimmen: der {{title_line_one}} Token benötigt ein Steuerelement namens title_line_one. Die vollständige Kontrollreferenz lebt in der Widget Builder-Dokumentation.

Ein zu kopierendes Detail: Geben Sie jedem Farbregler eine Standardeinstellung, die Ihrem Design entspricht. Ein Widget, das Grau importiert, weil seine Farbregler leer waren, sieht kaputt aus, selbst wenn dies nicht der Fall ist.

Schritt 7: Geben Sie es in den Elementor ein und bearbeiten Sie es wie jedes Widget

Veröffentlichen Sie das Widget und es erscheint im Elementor-Panel unter Master-Addons Ziehen Sie es auf eine Seite, und das linke Panel zeigt Ihre beschrifteten Felder “Wir machen” in Ihre eigene Überschrift ändern, den Akzent neu einfärben, die Schaltflächen auf Ihre Preisseite richten Die GSAP-Timeline läuft durch jeden Schnitt Das ist das ganze Versprechen: Animationskomplexität versteckt, Inhaltsbearbeitung offengelegt.

Die anderen fünf Abschnitte, kurz

Festzelt (3 Bedienelemente). Der Tickertext druckt zweimal für eine lückenlose CSS-Schleife, und GSAP übernimmt, um auf die Scrollgeschwindigkeit zu reagieren Scrollen Sie schnell und es beschleunigt bis zu 4 x, dann lässt es sich wieder lockern Spaß-Lehrbeispiel, weil der Fallback reines CSS ist: wenn GSAP nie lädt, scrollt es immer noch.

Arbeitsgalerie (22 Bedienelemente). Das Prunkstück ScrollTrigger pinnt den Abschnitt, während die Kartenspur horizontal übersetzt wird, ein Zähler tickt 01 / 05, und Karten schief leicht basierend auf der Scrollgeschwindigkeit Fünf Karten, jede mit bearbeitbarem Titel, Timecode und Tags. Auf dem Handy degradiert es zu einem nativen Wischkarussell, kein Pinning und kein JS erforderlich. Benötigt einen Abschnitt in voller Breite in Elementor, damit die Pin-Mathe funktioniert.

Statistiken (13 Kontrollen). Vier Zahlen, die beim Scrollen in die Ansicht mit einer Expo-Easy hochzählen Die endgültigen Zahlen leben im Markup selbst, also sehen auch bei deaktivierten JavaScript-Besuchern “142”, nicht “0”.

Prozess (20 Kontrollen). Meine Lieblingseinbildung auf der Seite: vier Prozessschritte, jeweils gepaart mit einer SVG-Easingkurve, die sich mit genau dieser Leichtigkeit selbst zeichnet Die lineare Kurve zeichnet linear, die Back-Out-Kurve überschießt Die Code-Captions sind bearbeitbare Textsteuerungen, so dass man die GSAP-Referenzen gegen eigene Schrittbeschreibungen austauschen kann.

CTA (11 Kontrollen). Gleiche Split-Text-Technik wie der Held, aber auf dem Scroll ausgelöst, dazu eine Magnettaste, die dem Cursor folgt und mit elastischer Leichtigkeit zurückfedert Richten Sie die URL-Steuerung auf einen Mailto: Link und es ist ein Kontaktabschnitt.

Laden Sie die Vorlage herunter (6 Widgets, ein Reißverschluss)

Download gsap-animation-elementor-widgets.zip „Alle sechs Widget-JSON-Dateien, kein E-Mail-Gatter.

Eine Anmerkung, bevor Sie beginnen: Die kostenlose Version von Master Addons liefert einen begrenzten Widget Builder aus, und der vollständige Funktionsumfang, den diese Widgets verwenden, ist im Lieferumfang enthalten Master Addons Pro. Zum Importieren:

1. Entpacken Sie den Download, Sie sehen sechs JSON-Dateien, eine pro Abschnitt
2. Gehe zu Master-Addons → Widget Builder In Ihrem WordPress-Dashboard
3. Klicken Sie auf ImportWählen Sie eine JSON-Datei aus und bestätigen Sie
4. Wiederholen Sie die gewünschten Abschnitte (Sie benötigen nicht alle sechs)
5. Öffnen Sie eine beliebige Seite mit Elementor und ziehen Sie die Widgets aus der Kategorie Master Addons hinein

Alles ist nach dem Import bearbeitbar: 88 Steuerelemente über die sechs Widgets, jede Farbe, jede Überschrift, jeder Link Keine Bilder zum Hochladen Alle Visuals sind CSS und SVG, wodurch auch die ganze Vorlage unter 200 KB bleibt.

Der KI-Winkel: Konvertieren Sie jedes generierte Design in Elementor

KI-Tools schreiben jetzt wirklich guten GSAP-Code Frag ChatGPT oder Claude nach “einem Heldenabschnitt mit GSAP-Split-Text-Enthüllung, dunklem Hintergrund, Scroll-Parallaxe” und du bekommst funktionierendes HTML, CSS und JS in einer Antwort Das Problem war immer die letzte Meile: dieser Code wurde als statische Datei festgeklebt, nutzlos für einen Client, der Elementor bearbeitet.

Der Widget Builder ist die letzte Meile Ein Prompt-Muster, das gut funktioniert:

Build a [section type] with GSAP animation.
Requirements:
- Wrap everything in one unique class, prefix all selectors with it
- Load gsap from cdn.jsdelivr.net/npm/gsap@3.15 via injected script tags
- Put editable text in {{token}} placeholders
- Define brand colors as CSS variables on the wrapper

Fragen Sie nach diesen vier Einschränkungen im Voraus und die Ausgabe fällt fast unverändert in den Widget Builder. Ich würde es trotzdem zuerst als flache HTML-Datei testen. KI-Code funktioniert normalerweise, aber „normalerweise“ist „kein Wort, das Sie auf der Live-Seite eines Clients entdecken möchten”.

Leistung: Halten Sie die GSAP-Animation schnell

• Laden Sie die Bibliothek einmal. Die geschützten Skript-IDs aus Schritt 5 verarbeiten dies automatisch über mehrere Widgets hinweg.
• Verwandlungen und Deckkraft animierenNicht Breite/Höhe/oben/links. GSAP macht dies standardmäßig mit x, y, und scale Der Browser verarbeitet sie ohne Reflow.
• Respekt bevorzugt-reduzierte-bewegung. Jedes Widget in der Vorlage prüft es und dient statischen Inhalten Barrierefreiheit, aber auch Akkulaufzeit.
• Die Gesamtkosten sind gering. GSAP-Kern + ScrollTrigger + SplitText ist ungefähr 90 KB minifiziert, weniger als die meisten Einzelheldenbilder Koppeln Sie die Vorlage mit schlanken Seiten und Sie werden Core Web Vitals bequem passieren; unsere Animationseffekt-Leitfaden Das breitere Geschwindigkeitsbild abdeckt.

Wenn sich GSAP wie mehr anfühlt, als Sie brauchen, versendet Master Addons auch No-Code-Bewegungen aus dem Kasten Eingangsanimationen, Floating-effekte (Pro) und die Animationssystem „Null-Setup. GSAP ist ausreichend, wenn die Voreinstellungen aufhören.

Video-Tutorial-Richtlinie

Vielleicht liest du nicht lieber, deshalb erstelle ich dir ein Video, wie du das Widget mit GSAP Animation in deinem Elementor-Editor herunterlädst und installierst.

Häufig gestellte Fragen

Beginnen Sie mit der Vorlage und bauen Sie dann Ihr eigenes

Importieren Sie die sechs Widgets, brechen Sie sie, bauen Sie sie wieder auf Der schnellste Weg, den Widget Builder zu verstehen, besteht darin, das Hero-Widget nach dem Import zu öffnen und zu sehen, wie 19 Steuerelemente den Token in seinem HTML-Tab zugeordnet werden. Danach wird jeder CodePen, den Sie mit einem Lesezeichen versehen, und jeder KI-generierte Abschnitt zu einem Widget-Kandidaten.

Master Addons läuft auf 30.000+ WordPress-Seiten, und der vollständige Widget Builder wird mit der Pro-Version ausgeliefert. Sehen Sie alles, was auf der enthalten ist Widgets und Erweiterungen SeiteLaden Sie die obige Vorlage herunter und Ihr erstes benutzerdefiniertes GSAP-Widget kann noch heute live sein.