React GSAP Reveal
Contexte
GSAP est l'une des librairies d'animations les plus puissantes du web. Elle peut être utilisée pour réaliser des effets de reveal au scroll (faire apparaître des éléments lorsqu'ils entrent dans le viewport), mais uniquement de façon impérative (manuelle).
Dans du code applicatif React, cette approche devient rapidement verbeuse, redondante et non idiomatique, ce qui décourage l'usage systématique et nuit à la cohérence de l'UI. Des librairies déclaratives de reveal existent, mais elles n'exploitent pas la puissance de GSAP. J'ai voulu les deux : la simplicité déclarative et la puissance de GSAP sous le capot.
De pattern personnel à librairie publique
Tout a commencé par un pattern mis en place dans un projet personnel :
- 👁️ Un unique IntersectionObserver, optimisé via un système de souscription, pour éviter la création d’un observer par élément à afficher
- ✨ Intégration de GSAP via une couche d’abstraction, encapsulée dans un composant React
Rapidement, le potentiel de réutilisabilité a émergé. J'ai progressivement factorisé, généralisé et paramétré ce pattern jusqu'à ce qu'il soit suffisamment robuste et typable pour être réutilisé à travers mes projets. L'étape suivante était naturelle : en faire une librairie publiée.
Mise en production et publication
- 🏗️ Extraction du projet hôte : mise en place d'un build Vite, structuration du projet comme un package npm autonome
- ⚖️ Respect de la propriété intellectuelle : GSAP référencé en peer dependency plutôt qu'en dependency directe, pour respecter leur licence et laisser l'utilisateur gérer sa propre version
- 🤖 CI/CD via GitHub Actions : déploiement automatique du site de démonstration sur GitHub Pages à chaque push
- 📦 Publication npm : versionnage sémantique respecté dès le début
- 📖 Documentation : rédaction d'une documentation complète couvrant l'installation, la configuration et les cas d'usage
- 💬 Feedback communautaire : post sur le forum officiel de GSAP pour valider l'approche architecturale. Réponse positive d'un habitué du forum depuis 2014.
- 📈 Adoption : pic de 899 téléchargements hebdomadaires autour de la publication
Bilan
Ce projet m'a appris à réfléchir en tant qu'auteur de librairie plutôt que consommateur.
En pratique, la librairie réduit significativement la verbosité et le temps de développement liés aux animations au scroll : un simple composant déclaratif suffit.
Elle exemplifie aussi ma façon d'aborder un problème récurrent : identifier un pattern, l'abstraire et le rendre réutilisable. Ici, je vais jusqu'au bout en le partageant avec la communauté.