Comment ajouter GSAP Animation dans Elementor (Gratuit Template)

Vous pouvez exécuter une animation GSAP complète dans Elementor. Le texte divisé révèle, le défilement horizontal épinglé, la parallaxe frottée par défilement, les compteurs, tout cela, sans développement de plugin ni fonctions.php edits, et vos clients conservent la possibilité de modifier chaque titre et couleur. L'astuce est la Constructeur de widgets dans Master Addons : collez votre HTML, CSS et JS une fois, marquez ce qui doit être modifiable et cela devient un widget Elementor normal que tout le monde peut déposer sur une page et modifier à partir du panneau.

Pour le prouver, j'ai construit un modèle complet de landing GSAP d'une page (un studio de mouvement fictif appelé Playhead) et j'ai converti chaque section en un widget importable Vous pouvez téléchargez les six widgets en une seule fois à la fin de cet article, importez-les en quelques clics et séparez-les pour voir exactement comment ils fonctionnent.

Dans ce guide, je vais parcourir la façon dont j'ai construit le widget de la section héros étape par étape, puis résumer les cinq autres sections Si vous avez déjà voulu convertir un design HTML/CSS/JS en Elementor, y compris le code que vous avez généré avec ChatGPT ou Claude, c'est le workflow.

Un raccourci avant de commencer : si le mouvement que vous souhaitez est une rangée d'images qui bouge, vous n'aurez peut-être pas du tout besoin d'écrire le GSAP. Nous avons déjà expédié 20 widgets carrousel et curseur construit de la même manière : on fait tourner les panneaux latéraux en 3D, on décolle les cartes d'une pile, on fait glisser ses diapositives autour d'une jante incurvée et chacun importe comme un widget Element normal que vous modifiez à partir du panneau.

Huit d'entre eux fonctionnent sur le plugin gratuit, douze ont besoin de Pro. Même si aucun ne correspond exactement, importer le plus proche et lire les battements JS à l'intérieur à partir d'un éditeur vide, et les étapes de construction plus loin dans ce message sont ce qui fait tourner ce JS dans les contrôles.

Qu’est-ce que GSAP Animation ?

GSAP (GreenSock Animation Platform) est une bibliothèque d'animation JavaScript qui anime n'importe quoi sur une page Web : texte, images, propriétés CSS, propriétés SVG avec un timing précis et un contrôle de facilité du cadre. Il alimente les effets de défilement et le texte révèle que vous voyez sur les sites primés, et depuis la version 3.13, l'ensemble de la bibliothèque, y compris les plugins premium comme ScrollTrigger et SplitText, est 100 % gratuit.

Cette dernière partie compte plus que ce que les gens réalisent SplitText (le plugin qui fait la une des journaux en personnages animés individuellement) coûtait plus de 99 $ par an derrière le paywall de “Club GreenSock” Après l'acquisition de GSAP par Webflow, tout est devenu gratuit Donc la seule véritable barrière qui reste aux utilisateurs de WordPress est l'intégration, et c'est ce que ce post supprime.

Le problème : l'élémenteur ne parle pas du GSAP

Les effets de mouvement intégrés d'Elementor couvrent les animations d'entrée, la parallaxe de base et le suivi de la souris. Bon pour 80 % des pages. Mais ils ne peuvent pas le faire :

• Le texte divisé révèle où chaque personnage s'anime avec son propre retard
• Sections épinglées qui défilent horizontalement pendant que la page défile verticalement
• Animation par défilement-griblée liée à la position exacte du défilement (spécialité de ScrollTrigger)
• Chaînées de chronologies où une animation passe à la suivante
• Effets à vitesse réactive, où les éléments réagissent à la vitesse à laquelle le visiteur défile

Les solutions de contournement habituelles partagent toutes une faille Vous pouvez coller du code dans un widget HTML, mais ensuite le texte du titre vit à l'intérieur d'un bloc de code que votre client n'osera jamais toucher Vous pouvez installer un plugin d'animation spécifique au GSAP, mais vous êtes limité à ses effets prédéfinis Vous pouvez mettre en file d'attente des scripts à la main dans votre thème enfant, mais maintenant l'édition d'un titre nécessite un développeur.

4 façons d'ajouter l'animation GSAP à l'élémenteur (par rapport)

Les plugins prédéfinis sont vraiment très bien si un fondu sur défilement est tout ce dont vous avez besoin Le Widget Builder gagne lorsque vous voulez une animation que personne d'autre n'a, parce que vous (ou une IA) l'avez écrit Vous faites fonctionner le code une fois, câbler les parties modifiables aux commandes, et à partir de ce moment-là, il se comporte comme n'importe quel widget Elementor d'origine : champs de texte, sélecteurs de couleurs, contrôles de liens, le lot.

Le modèle gratuit : une page d'atterrissage GSAP complète sous forme de 6 widgets

Playhead est un site d'une page pour un studio de mouvement fictif J'ai choisi ce créneau exprès : pour un studio de mouvement, l'animation est le portfolio, donc chaque effet gagne sa place La page tourne sur GSAP 3.15 avec ScrollTrigger et SplitText, chargés à partir du CDN officiel.

Les six widgets du téléchargement :

1. Héros SplitText caractère révéler, parallaxe formes de diamants, orbes lumineux dérivants, boutons magnétiques
2. Marquee un ticker infini qui accélère lorsque le visiteur défile plus vite
3. Galerie de travail défilement horizontal épinglé avec un compteur de cartes en direct et un biais de carte basé sur la vitesse
4. Statistiques « Les compteurs qui roulent à partir de zéro lorsqu'ils entrent dans la fenêtre »
5. Processus quatre courbes d'assouplissement qui dessinent littéralement, chacune utilisant sa propre facilité GSAP
6. CTA « Split-text reveal » déclenché par scroll avec un bouton de messagerie magnétique

Chaque widget est autonome : CSS à portée de main pour qu'il ne puisse pas entrer en conflit avec votre thème, son propre chargeur GSAP qui récupère la bibliothèque une fois même si les six widgets sont assis sur la même page, et les fallbacks pour que le contenu reste visible si jamais le CDN échoue Les préférences en matière de mouvement réduit sont également respectées Les visiteurs qui éteignent les animations dans leur OS obtiennent une page statique.

Comment j'ai construit le widget Hero, étape par étape

C'est la partie qui généralise à n'importe lequel animation que vous voudrez toujours Les mêmes sept étapes à chaque fois.

Étape 1 : Commencez par travailler HTML, CSS et JS

La source peut être n'importe quoi : un CodePen que vous admirez, une section que vous avez codée, ou sortie d'un chat IA. hero était trois fichiers le balisage, les styles, et un script qui construit une chronologie GSAP. Avant de toucher le Widget Builder, assurez-vous qu'il fonctionne comme un fichier .html simple dans un navigateur Le débogage y est 10 fois plus facile qu'à l'intérieur de n'importe quel constructeur de pages.

Étape 2 : Portée de tout à une classe d'emballage

Votre widget vivra sur des pages avec d'autres widgets, d'autres plugins, d'autres CSS. Enveloppez toute la section dans une classe unique et accrochez-y chaque sélecteur :

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

Renommez également les images clés d'animation génériques. @keyframes spin devient @keyframes ph-hero-spin4, donc deux widgets sur une page ne se battent jamais pour le même nom Cette seule étape empêche 90 % de “my widget de casser la page” tickets de support.

Étape 3 : Remplacer le texte modifiable par des jetons

Partout où un propriétaire de site peut vouloir des mots différents, échangez le texte codé en dur contre un jeton en accolades doubles :

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

Remarquez que je divise le titre en trois jetons au lieu d'un Le mot d'accent (“move”) est stylisé différemment iteralique serif, ambré, animé (ambre) donc il obtient son propre contrôle La personne qui édite n'a jamais besoin de le savoir ; elle voit juste trois champs de texte étiquetés Chaque jeton devient un Contrôle texte dans le constructeur.

Les boutons obtiennent un contrôle d'URL afin que le lien, la nouvelle onglet basculent et ne suivent pas tout le travail du panneau :

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

Étape 4 : Transformez les couleurs de la marque en contrôles de style

Résistez à l'envie de faire trente contrôles de couleurs Mon héros en a cinq : arrière-plan, texte, accent, primaire et sourd. Ils alimentent les variables CSS sur l'emballage, et chaque couleur dérivée (lueurs, bordures, ombres) est calculée à partir d'eux 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);
}

Changement “Primary” dans le Contrôle couleur et le bouton, l'orbe lumineux et les formes de diamant se mettent tous à jour ensemble. C'est ce qui donne l'impression qu'un widget est conçu au lieu d'être assemblé.

Étape 5 : Chargez GSAP à partir du CDN une fois

Le JS injecte les scripts GSAP avec des identifiants gardés, donc six widgets sur une page chargent toujours la bibliothèque exactement une fois :

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

Ensuite, l'animation elle-même est une chronologie GSAP standard. Les personnages montent avec un décalage, le mot d'accent apparaît avec back.out(2.5)[TRADUCTION] ?Les diamants frottent contre la position de défilement Si vous connaissez déjà GSAP, rien ne change Si vous ne le savez pas, c'est exactement le code qu'une IA écrira volontiers pour vous (plus d'informations à ce sujet ci-dessous).

Étape 6 : Créez le widget dans le Widget Builder

Dans votre tableau de bord WordPress : Modules complémentaires principaux → Widget Builder → Ajouter un nouveau. Nommez le widget, choisissez une icône, puis collez vos trois fichiers dans les onglets HTML, CSS et JS.

Maintenant, ajoutez un contrôle par jeton : 19 pour mon héros quatre textes sourcils, quatre champs de cap, la description, deux boutons avec leurs liens, le signal de défilement et cinq couleurs sur l'onglet Style. Le nom du contrôle doit correspondre exactement au jeton : le {{title_line_one}} token a besoin d'un contrôle nommé title_line_one. La référence de contrôle complète vit dans le Documentation du constructeur de widgets.

Un détail qui mérite d'être copié : donnez à chaque contrôle de couleur un widget correspondant par défaut à votre design Un widget qui importe du gris car ses contrôles de couleur étaient des looks vides cassés même quand ce n'est pas le cas.

Étape 7 : déposez-le dans l'élémenteur et modifiez comme n'importe quel widget

Publiez le widget et il apparaît dans le panneau Élémenteur sous Additions maîtres. Faites-le glisser sur une page, et le panneau de gauche affiche vos champs étiquetés Changez “Nous faisons” à votre propre titre, recolorons l'accent, pointez les boutons sur votre page de tarification La chronologie GSAP continue de parcourir chaque édition C'est toute la promesse : complexité de l'animation cachée, édition du contenu exposée.

Les cinq autres sections, brièvement

Marquee (3 contrôles). Le texte du téléscripteur s'imprime deux fois pour une boucle CSS sans espace, et GSAP prend le relais pour réagir à la vitesse de défilement Faites défiler rapidement et il accélère jusqu'à 4 x, puis facilite l'exemple d'enseignement amusant car le repli est du CSS pur : si GSAP ne se charge jamais, il défile toujours.

Galerie de travail (22 commandes). La pièce maîtresse. ScrollTrigger épingle la section tandis que la piste de la carte se traduit horizontalement, un compteur coche 01 /05 et les cartes s'inclinent légèrement en fonction de la vitesse de défilement Cinq cartes, chacune avec un titre modifiable, un timecode et des balises Sur mobile, il se dégrade en un carrousel de balayage natif, aucun épinglage et aucun JS requis. Nécessite une section pleine largeur dans Elementor pour que les mathématiques des épingles fonctionnent.

Statistiques (13 contrôles). Quatre nombres qui comptent avec une facilité d'exposition lorsqu'ils sont mis en évidence. Les nombres finaux vivent dans le balisage lui-même, donc même avec les visiteurs désactivés JavaScript, voir “142”, et non “00”.

Processus (20 contrôles). Ma vanité préférée sur la page : quatre étapes de processus, chacune associée à une courbe d'assouplissement SVG qui se dessine en utilisant cette facilité exacte La courbe linéaire dessine linéairement, la courbe de back-out dépasse Les légendes de code sont des contrôles de texte modifiables, vous pouvez donc échanger les références GSAP contre vos propres descriptions d'étapes.

CTA (11 contrôles). Même technique de split-text que le héros mais déclenchée sur scroll, plus un bouton magnétique qui suit le curseur et ressort avec une facilité élastique Pointez le contrôle URL sur un mailto : link et c'est une section de contact.

Téléchargez le modèle (6 widgets, un zip)

Télécharger gsap-animation-elementor-widgets.zip 100 000 fichiers JSON, 6 widgets gratuits, pas de porte de messagerie.

Une note avant de commencer : la version gratuite de Master Addons propose un Widget Builder limité, et l'ensemble complet de fonctionnalités utilisé par ces widgets est livré avec Maître Addons Pro. Importer:

1. Décompressez le téléchargement, vous verrez six fichiers JSON, un par section
2. Aller à Modules complémentaires principaux → Créateur de widgets dans votre tableau de bord WordPress
3. Cliquez Importation: choisissez un fichier JSON et confirmez
4. Répétez pour les sections que vous voulez (vous n'avez pas besoin des six)
5. Ouvrez n'importe quelle page avec Elementor et faites glisser les widgets de la catégorie Master Addons

Tout est modifiable après importation : 88 contrôles sur les six widgets, chaque couleur, chaque titre, chaque lien Pas d'images à télécharger Tous les visuels sont CSS et SVG, ce qui maintient également l'ensemble du modèle sous 200 Ko.

L'angle de l'IA : convertissez n'importe quelle conception générée en élément

Les outils d'IA écrivent un très bon code GSAP maintenant Demandez à ChatGPT ou Claude la section de héros de“a avec révélation de texte divisé GSAP, fond sombre, parallaxe de défilement” et vous obtiendrez HTML, CSS et JS fonctionnels en une seule réponse Le problème était toujours le dernier kilomètre : ce code était bloqué comme un fichier statique, inutile à un client qui édite dans Elementor.

Le Widget Builder est ce dernier kilomètre. Un modèle d’invite qui fonctionne bien :

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

Demandez ces quatre contraintes dès le départ et la sortie tombe dans le Widget Builder presque inchangé Je le testerais toujours en tant que fichier HTML plat d'abord Le code IA fonctionne habituellement, mais “habituellement” n'est pas un mot que vous voulez découvrir à l'intérieur de la page live d'un client.

Performances : maintenez l'animation GSAP rapide

• Charger la bibliothèque une fois. Les identifiants de script gardés de l'étape 5 gèrent cela automatiquement sur plusieurs widgets.
• Animer les transformations et l'opacité, pas largeur/hauteur/haut/gauche. GSAP le fait par défaut avec x, y, et scale Le compositeur les gère sans reflow.
• Le respect préfère le mouvement réduit. Chaque widget du modèle le vérifie et sert du contenu statique Accessibilité, mais aussi autonomie de la batterie.
• Le coût total est faible. GSAP core + ScrollTrigger + SplitText est environ 90 Ko minifié, moins que la plupart des images de héros uniques Associez le modèle à des pages allégées et vous passerez confortablement Core Web Vitals ; notre guide des effets d'animation couvre le tableau de vitesse plus large.

Si GSAP semble être plus que ce dont vous avez besoin, Master Addons envoie également un mouvement sans code hors de la boîte animations d'entrée, effets flottants& le système d'animation « Zéro configuration. GSAP est là lorsque les préréglages cessent d’être suffisants ».

Ligne directrice du didacticiel vidéo

Peut-être que vous ne préférez pas lire, alors je crée une vidéo pour vous sur la façon de télécharger et d'installer le widget avec GSAP Animation dans votre éditeur Elementor.

Foire aux questions

Commencez par le modèle, puis construisez le vôtre

Importez les six widgets, cassez-les, reconstruisez-les Le moyen le plus rapide de comprendre le Widget Builder est d'ouvrir le widget du héros après l'importation et de voir comment 19 contrôles sont mappés aux jetons dans son onglet HTML Après cela, chaque signet CodePen you et chaque section générée par l'IA devient un candidat widget.

Master Addons fonctionne sur plus de 30 000 sites WordPress, et le Widget Builder complet est livré avec la version Pro. Voir tout ce qui est inclus sur le page widgets et extensions1, téléchargez le modèle ci-dessus, et votre premier widget GSAP personnalisé peut être en ligne aujourd'hui.