Voor een project op stage stelde mijn stagebegeleider, Remy, voor om coole animaties toe te voegen met Framer Motion. In het bijzonder ging het om stagger-animaties, waarbij elementen achter elkaar geanimeerd worden. Dit kan bijvoorbeeld gebeuren wanneer elementen in beeld komen tijdens het laden van een pagina of tijdens scrollen. Het resultaat is een vloeiendere en visueel aantrekkelijkere gebruikerservaring.

Framer Motion is een populaire animatiebibliotheek voor React, ontwikkeld door Framer. Het maakt het eenvoudig om complexe animaties te maken zonder veel boilerplate code. Belangrijke kenmerken zijn:

• Declaratieve animaties: Je definieert animaties in JSX, zonder direct met CSS of JavaScript timing te werken.
• Gestures: Ondersteuning voor interacties zoals hover, tap en drag.
• Variants: Hiermee kun je animaties organiseren en hergebruiken voor meerdere componenten.
• Staggered Animations: Hiermee kun je animaties achter elkaar starten met een vooraf bepaalde vertraging, ideaal voor lijsten of galerijen.

• Snelle implementatie van animaties zonder externe CSS animaties.
• Krachtige combinatie met React componenten.
• Animaties blijven soepel en performant, dankzij intern gebruik van requestAnimationFrame.

• https://motion.dev/examples/react-motion-path
• https://motion.dev/examples/react-confetti
• https://motion.dev/examples/react-carousel-coverflow
• https://motion.dev/examples/react-split-text

Een stagger-animatie is een techniek waarbij meerdere elementen niet tegelijkertijd, maar opeenvolgend geanimeerd worden.

Dit kan bijvoorbeeld zo werken:

• Een lijst van items verschijnt één voor één.
• Elk item start iets later dan het vorige.
• Zo ontstaat een vloeiend, dynamisch effect.

In Framer Motion doe je dit meestal met een combinatie van variants en staggerChildren:

import { motion } from "framer-motion";

const list = {
  visible: {
    transition: {
      staggerChildren: 0.2, // vertraging tussen items
    },
  },
};

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

function MyList() {
  return (
    <motion.ul initial="hidden" animate="visible" variants={list}>
      <motion.li variants={item}>Item 1</motion.li>
      <motion.li variants={item}>Item 2</motion.li>
      <motion.li variants={item}>Item 3</motion.li>
    </motion.ul>
  );
}

Aan de hand van de bovenstaande research ben ik gaan experimenteren met Framer Motion in Codepen.

• Elk element verschijnt één voor één, waardoor de lijst er dynamisch uitziet.
• Het gebruik van opacity en y-transities maakt de animatie subtiel en modern.
• Kleine aanpassingen in staggerChildren veranderen direct de timing van de animatie, wat veel flexibiliteit biedt.

Link naar het experiment in CodePen