Page Transitions

Image of a page transition— Etch
  • Spring animations
  • Gestures (drag/tap/hover)
  • Variants
  • SVG paths
  • Exit animations
  • Variants for orchestrating animations across components
  • CSS variables
  • etc,…
Framer Motion website

How to get started with Framer Motion

npm install framer-motion
export const pageTransitions = {
in: {opacity: 1, y: 0},
out: {opacity: 0, y: "-100"}
import {motion} from 'framer-motion'
import {pageTransitions} from '../pageTransition';
visual of page transition — Just Breathe
render(){return (<div className="welcome-container"><motion.divinitial="out"animate="in"exit="out"variants={pageTransitions}.... ///</motion.div>


Page transition in react — Coding with Smith



Software Engineer, Novice Blogger, Indoor Climbing Cutie 🥰

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store