https://johannes-kaufmann.de/ Recent content on Johannes Kaufmann - Berlin based Product Engineer Hugo en-us Sun, 27 Dec 2020 00:00:00 +0000 https://johannes-kaufmann.de/notes/motion/ Sun, 27 Dec 2020 00:00:00 +0000 https://johannes-kaufmann.de/notes/motion/ Here are some examples of simple animations with Framer Motion. Specifically how to animate the path of an svg. npm install framer-motion import React from "react"; import { motion } from "framer-motion"; const iconVariants = { hidden: { pathLength: 0, stroke: "rgba(24, 56, 143, 0)", }, visible: { pathLength: 1, stroke: "rgba(24, 56, 143, 1)", }, }; const Logo = () => { return ( <svg height="48px" viewBox="0 0 13 15"> <motion.