Page Transitions

Akiko Green
3 min readJan 25, 2021
Image of a page transition— Etch

For my final project for Module 5 at Flatiron, it was the day before our projects were due for presentations. Unfortunately, my project was not how I envisioned it to look or function. That was okay, I had already accepted that it wouldn't. Fortunately, I at least wanted to learn something that would make my application at least look a little more dynamic!

That’s when I learned about React Page Transitions! Framer Motion — An open-source react animation library for frontend design lovers. With Framer Motion, you can do animations like:

  • 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

It is extremely simple! Following the framer motion GitHub here: , you first must install it in your react application.

npm install framer-motion

To implement this I first created a file called “page transitions.js”, this is a variant from framer motion —

Variants are a declarative way to orchestrate complex animations throughout a component tree. By providing multiple components with a variants object with visual states of the same name, they can all be animated in sync by the switch of a single animate prop.

export const pageTransitions = {
in: {opacity: 1, y: 0},
out: {opacity: 0, y: "-100"}

I can now use this variant anywhere in my application as long as I import it to my desired component. Now, let's say I want to start using this variant in the welcome & EntryJournal components that I have in my app.

First, you’ll need to import motion from “framer-motion” and pageTransitions from “pageTransitions

import {motion} from 'framer-motion'
import {pageTransitions} from '../pageTransition';

Great! Now for a simple smooth page transition, I learned how to do a “ fade in and fade out ” transition from page to page.

visual of page transition — Just Breathe

Next, in my desired components, I added motion to the div where my routes are located where you render the component:

render(){return (<div className="welcome-container"><motion.divinitial="out"animate="in"exit="out"variants={pageTransitions}.... ///</motion.div>

There you have it! It’s as easy as 1–2–3!

Disclaimer: More will be added to this blog later in the week, there is so much more to Framer motion that I want to talk about, however, I do not have the time to write it right now!


Here is the Framer Motion website: along with the Github on how to get started:

A simple tutorial that first taught me about how to implement framer motion:

Page transition in react — Coding with Smith



Akiko Green

Software Engineer, Novice Blogger, Indoor Climbing Cutie 🥰