Sådan tilføjes GSAP-animation i Elementor (gratis skabelon)

Du kan køre fuld GSAP animation inde Elementor. Split-tekst afslører, fastgjort vandret rulle, rulle-scrubbed parallakse, tællere, det hele, med ingen plugin udvikling og ingen funktioner.php redigeringer, og dine klienter holde evnen til at redigere hver overskrift og farve. Tricket er den Widget Builder i Master Addons: indsæt din HTML, CSS og JS én gang, marker, hvad der skal kunne redigeres, og det bliver en normal Elementor-widget, som alle kan slippe på en side og redigere fra panelet.

For at bevise det byggede jeg en komplet en-sides GSAP-landingsskabelon (et fiktivt motion studio kaldet Playhead) og konverterede hver sektion til en importerbar widget. Du kan download alle seks widgets som én zip i slutningen af dette indlæg skal du importere dem med et par klik og vælge dem fra hinanden for at se præcis, hvordan de fungerer.

I denne vejledning vil jeg gå gennem, hvordan jeg byggede heltesektionens widget trin for trin, og derefter opsummere de andre fem sektioner. Hvis du nogensinde har ønsket at konvertere et HTML/CSS/JS-design til Elementor, inklusive kode, du genererede med ChatGPT eller Claude, er dette arbejdsgangen.

Én genvej, før du starter: Hvis den bevægelse, du ønsker, er en række billeder, der bevæger sig, behøver du muligvis slet ikke at skrive GSAP. Vi har allerede sendt 20 karrusel- og skyderwidgets bygget på samme måde – man roterer sidepaneler i 3D, man skræller kort af en stak, man rider sine slides rundt om en buet fælg – og hver importerer som en normal Elementor-widget, du redigerer fra panelet.

Otte af dem kører på det gratis plugin, tolv har brug for Pro. Selvom ingen er et nøjagtigt match, slår import af den nærmeste og læsning af JS inde i den startende fra en tom editor, og byggetrinene længere nede i dette indlæg er det, der gør den JS til kontrol.

Hvad Er GSAP Animation?

GSAP (GreenSock Animation Platform) er et JavaScript animationsbibliotek, der animerer alt på en webside — tekst, billeder, SVG, CSS egenskaber — med frame-nøjagtig timing og lempelse kontrol. Det driver rulleeffekterne og tekst afslører, at du ser på prisvindende websteder, og siden version 3.13 hele biblioteket, herunder premium plugins som ScrollTrigger og SplitText, er 100% gratis.

Den sidste del betyder mere end folk indser. SplitText (plugin'et, der bryder overskrifter i individuelt animerede tegn) plejede at koste $ 99 + om året bag “Club GreenSock” paywall. Efter Webflow erhvervede GSAP, gik alt gratis. Så den eneste reelle barriere tilbage for WordPress-brugere er integration, og det er, hvad dette indlæg fjerner.

Problemet: Elementor taler ikke GSAP

Elementors indbyggede bevægelseseffekter dækker indgangsanimationer, grundlæggende parallakse og musesporing. God til 80% af siderne. Men de kan ikke gøre:

• Split-tekst afslører, hvor hver karakter animerer ind med sin egen forsinkelse
• Fastgjorte sektioner, der ruller vandret, mens siden ruller lodret
• Rul-scrubbed animation bundet til nøjagtig rulleposition (ScrollTriggers speciale)
• Lænkede tidslinjer, hvor den ene animation afleveres til den næste
• Hastighedsreaktive effekter, hvor elementer reagerer på, hvor hurtigt den besøgende ruller

De sædvanlige løsninger deler alle en fejl. Du kan indsætte kode i en HTML-widget, men så lever overskriftsteksten inde i en kodeblok, som din klient aldrig vil vove at røre ved. Du kan installere et GSAP-specifikt animationsplugin, men du er begrænset til dets forudindstillede effekter. Du kan sætte scripts i kø i hånden i dit underordnede tema, men nu kræver redigering af en overskrift en udvikler.

4 måder at tilføje GSAP-animation til Elementor (sammenlignet)

Forudindstillede plugins er virkelig fine, hvis en fade-on-scroll er alt, hvad du behøver. Widget Builder vinder, når du vil have en animation, ingen andre har, fordi du (eller en AI) skrev det. Du gør koden arbejde en gang, wire de redigerbare dele til kontrolelementer, og fra da af opfører det sig som enhver lager Elementor widget: tekstfelter, farvevælgere, link kontrol, partiet.

Den gratis skabelon: En fuld GSAP-landingsside som 6 widgets

Playhead er en en-sides side for et fiktivt motion studio. Jeg valgte den niche med vilje: for et motion studio, animationen er porteføljen, så hver effekt tjener sin plads. Siden kører på GSAP 3.15 med ScrollTrigger og SplitText, indlæst fra den officielle CDN.

De seks widgets i download:

1. Hero — SplitText karakter afsløring, parallakse diamant former, drivende glød kugler, magnetiske knapper
2. Marquee — uendelig ticker, der fremskynder, når den besøgende ruller hurtigere
3. Work Gallery — fastgjort vandret rulle med en live korttæller og hastighedsbaseret kortskævhed
4. Stats — tællere, der ruller op fra nul, når de kommer ind i viewport
5. Process — fire lempelseskurver, der bogstaveligt talt tegner sig selv, hver ved hjælp af sin egen GSAP-lethed
6. CTA — rulleudløst split-tekst afsløring med en magnetisk e-mail-knap

Hver widget er selvstændig: scoped CSS, så det ikke kan kollidere med dit tema, sin egen GSAP loader, der henter biblioteket én gang, selvom alle seks widgets sidder på samme side, og fallbacks, så indholdet forbliver synligt, hvis CDN nogensinde mislykkes. Præferencer med reduceret bevægelse respekteres også. Besøgende, der slukker animationer i deres OS, får en statisk side.

Hvordan jeg byggede helten Widget, trin for trin

Det er den del, der generaliserer til any animation, du nogensinde vil have. Samme syv trin hver gang.

Trin 1: Start med at arbejde HTML, CSS og JS

Kilden kan være hvad som helst: en CodePen du beundrer, en sektion du kodede, eller output fra en AI chat. Min helt var tre filer — markup, stilarterne, og et script, der bygger en GSAP tidslinje. Før du rører Widget Builder, skal du sørge for, at det fungerer som en almindelig .html-fil i en browser. Debugging er 10x lettere der end inde i nogen side builder.

Trin 2: Omfang alt til én wrapper klasse

Din widget vil leve på sider med andre widgets, andre plugins, andre CSS. Wrap hele sektionen i én unik klasse og hænge hver vælger ud af det:

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

Omdøb også generiske animationsnøglerammer. @keyframes spin bliver @keyframes ph-hero-spin, så to widgets på én side aldrig kæmpe over samme navn. Dette enkelt trin forhindrer 90% af “min widget brød siden” supportbilletter.

Trin 3: Erstat redigerbar tekst med tokens

Hvor som helst en webstedsejer måske vil have forskellige ord, skal du bytte den hårdkodede tekst til et token i dobbelte krøllede klammer:

<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>

Bemærk Jeg opdeler overskriften i tre tokens i stedet for en. Accentordet (“flyt”) er stylet forskelligt — kursiv serif, rav, animeret — så det får sin egen kontrol. Personredigeringen behøver aldrig at vide det; de ser bare tre mærkede tekstfelter. Hvert token bliver en Tekstkontrol i bygherren.

Knapper får en URL-kontrol, så linket, den nye fane skifter, og nofollow alt arbejde fra panelet:

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

Trin 4: Drej mærkefarver til stilkontroller

Modstå trangen til at lave tredive farvekontroller. Min helt har fem: baggrund, tekst, accent, primær og dæmpet. De fodrer CSS-variabler på omslaget, og hver afledt farve (gløder, kanter, skygger) beregnes ud fra dem med 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);
}

Skift “Primær” i Farvekontrol og knappen, glødkuglen og diamantformerne opdateres alle sammen. Det er det, der får en widget til at føles designet i stedet for samlet.

Trin 5: Indlæs GSAP fra CDN — Once

JS injicerer GSAP-scripts med beskyttede id'er, så seks widgets på én side stadig indlæser biblioteket præcis én gang:

["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"]

Så er selve animationen en standard GSAP-tidslinje. Karakterer stiger ind med en forskydning, accentordet popper med back.out(2.5), diamanterne skrubbe mod rulleposition. Hvis du allerede kender GSAP, intet ændrer sig. Hvis du ikke gør det, dette er præcis den kode en AI vil med glæde skrive for dig (mere om det nedenfor).

Trin 6: Opret widget i widgetbyggeren

I dit WordPress dashboard: Master Addons → Widget Builder → Tilføj Ny. Navngiv widgetten, vælg et ikon, og indsæt derefter dine tre filer i HTML-, CSS- og JS-fanerne.

Tilføj nu en kontrol pr. token: 19 for min helt — fire øjenbrynstekster, fire overskriftsfelter, beskrivelsen, to knapper med deres links, rullesignalet og fem farver på fanen Stil. Kontrolnavn skal matche tokenet nøjagtigt: den {{title_line_one}} token har brug for en kontrol med navnet title_line_one. Den fulde kontrolreference lever i Widget Builder dokumentation.

En detalje, der er værd at kopiere: Giv hver farvekontrol en standard, der matcher dit design. En widget, der importerer grå, fordi dens farvekontroller var tomme, ser ødelagt ud, selv når den ikke er det.

Trin 7: Drop det ind i Elementor og rediger som enhver widget

Udgiv widgetten, og den vises i Elementor-panelet under Master Addons. Træk den over på en side, og venstre panel viser dine mærkede felter. Skift “Vi laver” til din egen overskrift, omfarv accenten, peg knapperne mod din prisside. GSAP-tidslinjen bliver ved med at køre gennem hver redigering. Det er hele løftet: animationskompleksitet skjult, indholdsredigering afsløret.

De andre fem sektioner, kort

Markeringsramme (3 kontroller). Tickerteksten udskriver to gange for en gapless CSS-løkke, og GSAP tager over for at reagere på rullehastighed. Rul hurtigt, og det accelererer op til 4x, og letter derefter tilbage. Sjovt undervisningseksempel, fordi fallback er ren CSS: hvis GSAP aldrig indlæses, ruller det stadig.

Arbejdsgalleri (22 kontroller). Showpiece. ScrollTrigger stifter sektionen, mens kortsporet oversættes vandret, en tæller tikker 01 / 05, og kortene skæv lidt baseret på rullehastighed. Fem kort, hver med redigerbar titel, tidskode og tags. På mobil nedbrydes det til en indfødt swipe-karrusel, ingen pinning og ingen JS påkrævet. Har brug for en fuldbredde sektion i Elementor for at pin-matematik kan fungere.

Statistik (13 kontroller). Fire tal, der tæller op med en expo lethed, når rullet ind i visning. De endelige tal bor i markup selv, så selv med JavaScript deaktiverede besøgende se “142”, ikke “0”.

Proces (20 kontroller). Min favorit indbildskhed på siden: fire procestrin, hver parret med en SVG-lettelseskurve, der tegner sig selv ved hjælp af den nøjagtige lethed. Den lineære kurve tegner lineært, back-out-kurven overskrider. Kodeteksterne er redigerbare tekstkontroller, så du kan bytte GSAP-referencerne til dine egne trinbeskrivelser.

CTA (11 kontroller). Samme split-tekst teknik som helten, men udløses på rulle, plus en magnetisk knap, der følger markøren og springer tilbage med en elastisk lethed. Peg URL-kontrollen på en mailto: link, og det er en kontaktsektion.

Download skabelonen (6 widgets, én lynlås)

Download gsap-animation-elementor-widgets.zip — alle seks widget JSON filer, gratis, ingen e-mail-gate.

En note før du starter: den gratis version af Master Addons sender en begrænset Widget Builder, og det fulde funktionssæt, som disse widgets bruger, leveres med Master Addons Pro. For at importere:

1. Fjern download - du vil se seks JSON-filer, en pr. sektion
2. Gå til Master Addons → Widget Builder i dit WordPress dashboard
3. Klik Import, vælge en JSON-fil, og bekræfte
4. Gentag for de sektioner, du ønsker (du behøver ikke alle seks)
5. Åbn en vilkårlig side med Elementor, og træk widgets ind fra kategorien Masteraddons

Alt kan redigeres efter import: 88 kontroller på tværs af de seks widgets, hver farve, hver overskrift, hvert link. Ingen billeder at uploade. Alle de visuelle elementer er CSS og SVG, som også holder hele skabelonen under 200KB.

AI-vinklen: Konverter ethvert genereret design til Elementor

AI-værktøjer skriver virkelig god GSAP-kode nu. Spørg ChatGPT eller Claude om “en heltesektion med GSAP split-tekst afsløring, mørk baggrund, rulleparallakse”, og du får fungerende HTML, CSS og JS i ét svar. Problemet var altid den sidste mile: den kode blev fast som en statisk fil, ubrugelig for en klient, der redigerer i Elementor.

Widget Builder er den sidste mile. Et prompt mønster, der fungerer godt:

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

Spørg efter de fire begrænsninger på forhånd, og outputtet falder i Widget Builder næsten uændret. Jeg ville stadig teste det som en flad HTML-fil først. AI-kode fungerer normalt, men “normalt” er ikke et ord, du vil opdage inde i en klients live-side.

Ydeevne: Hold GSAP Animation Hurtig

• Indlæs biblioteket én gang. De beskyttede script-id'er fra trin 5 håndterer dette automatisk på tværs af flere widgets.
• Animér transformationer og opacitet, ikke bredde/højde/top/venstre. GSAP gør dette som standard med x, y, og scale — browser-kompositoren håndterer dem uden reflow.
• Respekt foretrækker-reduceret-bevægelse. Hver widget i skabelonen kontrollerer det og serverer statisk indhold. Tilgængelighed, men også batterilevetid.
• De samlede omkostninger er små. GSAP kerne + ScrollTrigger + SplitText er omtrent 90KB minificeret, mindre end de fleste enkelt helt billeder. Par skabelonen med magre sider, og du vil passere Core Web Vitals komfortabelt; vores guide til animationseffekter dækker det bredere hastighedsbillede.

Hvis GSAP føles som mere, end du har brug for, sender Master Addons også no-code motion ud af boksen — indgang animationer, flydende effekter (Pro), og den animationssystem — med nul opsætning. GSAP er til når forudindstillinger holder op med at være nok.

Video Tutorial Guideline

Måske foretrækker du ikke at læse, så jeg opretter en video til dig om, hvordan du downloader og installerer widgetten med GSAP Animation i din Elementor-editor.

Ofte stillede spørgsmål

Start med skabelonen, og byg derefter din egen

Importer de seks widgets, bryde dem, genopbygge dem. Den hurtigste måde at forstå Widget Builder er at åbne helten widget efter import og se, hvordan 19 kontrolelementer kort til tokens i sin HTML-fane. Derefter bliver hver CodePen du bogmærke og hver AI-genereret sektion en widget kandidat.

Master Addons kører på 30.000 + WordPress sites, og den fulde Widget Builder skibe med Pro-versionen. Se alt inkluderet på den widgets og udvidelser side, downloade skabelonen ovenfor, og din første brugerdefinerede GSAP widget kan være live i dag.