Deze week Algemeen

Claude Code voor web-animaties: hoe ik het bij klanten gebruik

• 7 min leestijd • Sepp
Kort antwoord

Claude Code is goed in het bouwen van CSS- en JavaScript-animaties op basis van een korte beschrijving. In plaats van uren googelen of tutorials kijken, beschrijf je wat je wilt en je krijgt werkende code terug. Bij mijn klanten gebruik ik dit voor scroll-animaties, hover-effecten en pagina-overgangen. De code is meestal 80 procent goed direct, de laatste 20 procent zijn timing-aanpassingen die ik per oog beoordeel.

Het patroon dat ik altijd gebruik bij animaties

Beschrijf wat de gebruiker zou moeten zien (niet de techniek), geef context over de stack en kies een animatie-bibliotheek. Drie zinnen prompt, een halve pagina werkende code terug.

Concreet bij een klant: hij wilde dat zijn productkaarten "subtiel oprijzen" als de gebruiker er overheen beweegt. Mijn prompt aan Claude: Ik werk in React 18 met Tailwind CSS en framer-motion. Maak een ProductCard component die een subtiele lift-animatie heeft op hover: 4px omhoog, lichte schaduw, 200ms duur, ease-out timing.

Resultaat: een werkend component dat ik direct kon gebruiken. Twee minuten finetune nodig om de schaduwsterkte iets minder zwaar te maken. Werk dat me vroeger een halve middag kostte aan tutorials kijken en code aanpassen, nu een kwartier.

Welke bibliotheken werken het beste

Voor React: framer-motion, sterk en goed gedocumenteerd. Voor vanilla JS: GSAP voor complexere flows, of pure CSS-keyframes voor eenvoud. Vermijd jQuery-animaties, dat is achterhaald en Claude voelt dat ook aan in zijn voorstellen.

Mijn ervaring per stack: framer-motion is voor React-werk een veilige eerste keuze omdat Claude er heel veel voorbeelden van kent en dus zelden onzin produceert. GSAP is breder en krachtiger maar vraagt meer instelwerk. Pure CSS-animaties zijn voor simpele effecten ideaal en kosten geen extra bibliotheek.

Bij klanten kies ik per project. Een marketing-landingspagina: pure CSS plus eventueel framer-motion voor één of twee key-momenten. Een interactieve webapp: framer-motion of GSAP afhankelijk van de complexiteit. Niet alles op één bibliotheek bouwen, niet alles los oplossen.

De finetune-fase die niemand overslaat

Animaties die op de eerste try goed voelen zijn zeldzaam. Timing, easing en delay zijn drie kleine knoppen waarmee je een animatie van "OK" naar "echt goed" brengt. Plan tijd in voor deze finetune, anders levert je werk halve kwaliteit op.

Wat ik bij elke animatie doe: nadat Claude code heeft opgeleverd, draai ik hem in de browser en kijk drie keer. Eerste keer voor de timing (te snel of te traag?), tweede keer voor de easing (voelt het natuurlijk of mechanisch?), derde keer voor de afstemming met andere elementen op de pagina. Per check minimaal één micro-aanpassing.

Tip uit eigen ervaring: animaties die op een snel scherm goed voelen, voelen op een traag scherm vaak haperig. Ik test bij klanten altijd op minimaal twee apparaten voordat ik iets als af bestempel.

Toegankelijkheid: het stuk dat AI vergeet

Claude denkt niet automatisch aan gebruikers die animaties willen uitschakelen. De CSS-mediaquery <code>prefers-reduced-motion</code> moet je zelf vragen. Bij elke animatie doe ik dat als laatste stap.

Wat ik standaard doe bij elke animatie: na de eerste werkende versie voeg ik handmatig de respect voor prefers-reduced-motion toe. Een gebruiker die deze instelling heeft staat (vaak vanwege vestibulaire klachten) krijgt dan geen of veel kortere animaties.

Een typische CSS-versie ziet er zo uit:

.product-card {
  transition: transform 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .product-card {
    transition: none;
  }
}

Bij framer-motion is er een ingebouwde useReducedMotion-hook die hetzelfde doet. Vraag Claude er expliciet om, anders vergeet hij het. Toegankelijkheid en animaties zijn een paar dat je actief moet bewaken.

Conclusie

Mijn enthousiaste maar nuchtere kijk: Claude Code voor animaties is een echte productiviteitswinst, vooral voor de uitvoerende kant. Wat het niet vervangt is jouw oog voor wat goed voelt. Tien minuten typen plus twintig minuten finetunen, dat is mijn vaste tempo geworden bij animatie-werk. Ik gebruik dit bij elk klantproject met visuele interactie. Wat je niet doet: animaties als pronkstuk inzetten zonder te denken aan reduced-motion-gebruikers. Die groep is groter dan veel developers beseffen, en goede toegankelijkheid is hier een kleine investering met grote impact.

Veelgestelde vragen

Voor React: framer-motion, vrijwel altijd. Voor vanilla JS: GSAP voor complexer werk, anonieme CSS voor eenvoud. Voor Vue: vue-use of GSAP. Het is geen vooringenomenheid, het is dat deze bibliotheken zo veel goede voorbeelden in de trainingsdata hebben dat de output betrouwbaarder is.

Ja, GSAP-timelines en framer-motion-orchestraties krijgen prima output. Wat je wel merkt: hoe complexer de animatie, hoe meer finetune-werk. Voor zeer complexe interacties is mijn werkwijze om het in stappen op te bouwen, telkens een sub-animatie toevoegen en testen, in plaats van alles in één prompt te vragen.

De moderne CSS- en JS-features die hij gebruikt werken in alle huidige browsers (Chrome, Safari, Firefox, Edge). Voor oudere browsers zoals IE11 of Safari-versies van voor 2020 moet je extra moeite doen, maar voor de gemiddelde Nederlandse zakelijke website is dat niet relevant.

In Pro of Max-abonnement nauwelijks. Bij API-gebruik via een eigen key zit een typische animatie-sessie op een paar dollarcent. Animaties zijn relatief korte interacties met weinig context, dus goedkoop in vergelijking met grote refactor-sessies.

Meer over Algemeen