1. Origine
Made with GSAP est né d'un constat simple : GSAP est la librairie d'animation JavaScript la plus utilisée sur le web créatif, mais les ressources pour l'apprendre de façon progressive et structurée manquaient. Le projet a été construit autour de la conviction que la meilleure façon d'apprendre une librairie d'animation, c'est de voir des effets concrets, de comprendre comment ils fonctionnent, et de pouvoir les réutiliser directement. L'intégration Webflow est venue s'y ajouter comme une évidence, compte tenu de l'acquisition de GSAP par Webflow en octobre 2024 et de la proximité naturelle entre les deux outils dans les workflows des studios web créatifs. Le site a été récompensé par un SOTD Awwwards, signal de la qualité de son exécution. Il est aujourd'hui utilisé par plus de 1 500 développeurs.
2. Utilité
Chez Studio Relief, Made with GSAP remplit deux rôles complémentaires. En phase de conception, c'est une base de références : quand un client évoque une animation de scroll immersive ou une interaction souris originale, on ouvre la collection pour identifier les patterns GSAP qui correspondent à l'intention. Chaque effet est documenté avec son code source et un tutoriel qui explique la logique d'animation pas à pas. En phase de production, le bouton copy-to-Webflow change concrètement la vitesse d'intégration : au lieu de construire un effet de zéro, on part d'une base fonctionnelle qu'on adapte au design et aux contraintes du projet. Le gain n'est pas seulement en temps de développement, c'est aussi en fiabilité : les effets sont testés, stables, et construits avec les bonnes pratiques GSAP.
3. Fonctionnalités
Made with GSAP repose sur trois piliers : une collection d'effets, des ressources pédagogiques, et une compatibilité Webflow directe.
Collection d'effets
- 50 effets JavaScript : scroll, drag, interactions souris, animations infinies
- Catégories : effets organisés pour naviguer rapidement selon le type d'animation recherché
- GSAP natif : chaque effet utilise exclusivement le core GSAP et ses plugins officiels, sans WebGL ni dépendance externe
- Previews interactives : pour visualiser le rendu avant d'explorer le code
Apprentissage
- Tutoriels pas à pas : pour chaque effet, accessibles à tous les niveaux, y compris les développeurs qui débutent avec GSAP
- Code source complet : lisible et commenté, avec les patterns GSAP expliqués dans leur contexte
- Approche progressive : chaque tutoriel isole les techniques fondamentales plutôt que de noyer le lecteur dans la complexité
Intégration Webflow
- Bouton copy-to-Webflow : disponible pour chaque effet, colle l'ensemble des éléments HTML, des attributs et des scripts directement dans le Designer Webflow
- Zéro configuration manuelle : l'effet fonctionne dès le paste, sans manipulation dans les paramètres du projet
- Intégration pages existantes : conçu pour s'intégrer dans des pages Webflow existantes sans reconstruire la structure
4. Cas concrets
→ Sur les projets où l'expérience de scroll est centrale (site vitrine d'une marque premium, landing page de lancement), Made with GSAP est notre premier point de référence. On y identifie les patterns de ScrollTrigger qui correspondent à l'intention créative du client, on adapte les vitesses, les easings et les déclencheurs au design system, et l'effet est en production en une fraction du temps qu'il faudrait pour le construire de zéro.
→ Sur les projets où le client souhaite des interactions souris sophistiquées (effets de parallaxe, trails, transformations au curseur), les effets mouse-based de la collection servent de base technique. L'avantage est double : on s'appuie sur un code déjà optimisé pour la performance, et on peut montrer un prototype interactif au client très tôt dans le processus, ce qui facilite la validation créative avant de s'engager dans le développement complet.
5. Prix
Made with GSAP est disponible avec un paiement unique, sans abonnement ni frais récurrents. Ce paiement donne accès à l'intégralité des 50 effets et à leurs tutoriels, ainsi qu'au bouton copy-to-Webflow. Les tarifs à jour sont disponibles directement sur leur site.
→ madewithgsap.com/get-started.php
6. Questions fréquentes
Made with GSAP remplace-t-il la documentation officielle GSAP ?
Non, les deux sont complémentaires. La documentation GSAP couvre l'API dans sa globalité ; Made with GSAP propose des effets concrets, pré-construits, avec des tutoriels orientés mise en pratique. On utilise les deux : la doc pour comprendre une fonctionnalité en profondeur, Made with GSAP pour démarrer un effet rapidement.
Les effets fonctionnent-ils sans abonnement Webflow spécifique ?
Oui, la fonctionnalité copy-to-Webflow est incluse dans l'accès Made with GSAP et ne nécessite pas de plan Webflow particulier. Il suffit d'avoir un projet Webflow ouvert dans le Designer.
GSAP est-il gratuit pour un usage commercial ?
Oui. Depuis mai 2025 et la version 3.13, GSAP et l'intégralité de ses plugins sont gratuits pour tous les usages, y compris commerciaux, grâce au soutien de Webflow.
Peut-on modifier les effets après les avoir importés dans Webflow ?
Oui, le code importé est entièrement éditable. L'effet est une base de départ : on peut modifier les valeurs d'animation, les déclencheurs, les cibles, ou combiner plusieurs effets dans un même projet.
