React GSAP Reveal
Context
GSAP is een van de meest krachtige animatiebibliotheken op het web. Het kan worden gebruikt om scroll-based reveal-effecten te maken (elementen laten verschijnen wanneer ze in de viewport komen), maar alleen op een imperatieve (handmatige) manier.
In een React-applicatie wordt deze aanpak al snel omslachtig, repetitief en niet idiomatisch, wat het systematisch gebruik ontmoedigt en de consistentie van de UI schaadt. Declaratieve reveal-bibliotheken bestaan wel, maar benutten niet de volledige kracht van GSAP. Ik wilde beide: declaratieve eenvoud en de kracht van GSAP onder de motorkap.
Van persoonlijk patroon naar publieke bibliotheek
Alles begon met een patroon dat in een persoonlijk project werd opgezet:
- 👁️ Eén enkele IntersectionObserver, geoptimaliseerd via een subscriptionsysteem om te voorkomen dat er per element een observer wordt aangemaakt
- ✨ Integratie van GSAP via een abstractielaag, verpakt in een React-component
Het potentieel voor herbruikbaarheid werd al snel duidelijk. Ik heb dit patroon geleidelijk gerefactord, gegeneraliseerd en geparametriseerd totdat het robuust en sterk getypeerd genoeg was om in meerdere projecten te gebruiken.
De volgende stap was logisch: er een gepubliceerde bibliotheek van maken.
Productie en publicatie
- 🏗️ Extractie uit het hostproject: opzetten van een Vite-build en structureren van het project als een zelfstandig npm-pakket
- ⚖️ Respect voor intellectueel eigendom: GSAP als peer dependency gedeclareerd in plaats van een directe dependency, om aan de licentie te voldoen en gebruikers hun eigen versie te laten beheren
- 🤖 CI/CD met GitHub Actions: automatische deployment van de demo-site naar GitHub Pages bij elke push
- 📦 Publicatie op npm: vanaf het begin semantische versionering toegepast
- 📖 Documentatie: het schrijven van uitgebreide documentatie over installatie, configuratie en gebruiksscenario's
- 💬 Communityfeedback: post op het officiële GSAP-forum om de architectuur te valideren. Positieve reactie van een actieve bijdrager sinds 2014
- 📈 Adoptie: piek van 899 wekelijkse downloads rond de publicatie
Conclusie
Dit project heeft me geleerd te denken als een bibliotheekauteur in plaats van als een gebruiker.
In de praktijk vermindert de bibliotheek aanzienlijk de omslachtigheid en de ontwikkeltijd die gepaard gaan met scroll-animaties: één declaratieve component volstaat.
Het illustreert ook hoe ik een terugkerend probleem aanpak: een patroon identificeren, abstraheren en herbruikbaar maken. Hier ga ik nog een stap verder door het met de community te delen.