Matt Perry van Framer en ik bekijken de React-animatiebibliotheek Framer Motion.
Eerst kijken we hoe eenvoudig de API is. Je bestuurt alles heel declaratief door middel van rekwisieten op elementen in je JSX. Het besturen van animatie op deze laag is zeer intuïtief en verbonden met de gebruikersinterface en staat op een zinvolle manier.
Elk voorbeeld dat we bekijken, is realistischer en omvat meer functies van waar Framer Motion toe in staat is. React-ontwikkelaars zullen dol zijn op de syntaxis van dit alles, en alle anderen zullen genieten van de ongelooflijk performante en vloeiende resultaten.
We kijken uiteindelijk naar Framer zelf, die deze exacte bibliotheek intern gebruikt om alle animatie-dingen te doen die Framer doet. Geïntrigeerd door Framer? Framer X downloaden.
Demo 1: Basissyntaxis
Demo 2: varianten
Demo 3: AnimatePresence en layoutTransition
Bonus: bekijk de functie "scrollen om te sluiten" in de pop-up met afbeeldingen.