Page Transitions

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: https://github.com/framer/motion , 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!

References

Here is the Framer Motion website: https://www.framer.com/motion/ along with the Github on how to get started: https://github.com/framer/motion.

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

Page transition in react — Coding with Smith

--

--

--

Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Hooks Continued

What Is “This” in JavaScript: How to Force It to Be Lexical-Scoped Instead of Dynamic-Scoped

JavaScript: How to implement the linked list data structure

Implement a linked list with JavaScript

How to make API calls in a smart way

React Portals — Understanding with examples

20 JavaScript Concepts you should know as a JavaScript Programmer!

Run my first ever Javascript program!!!

How to Debug in Vs Code ?

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
Akiko Green

Akiko Green

Software Engineer

More from Medium

Get Images’ Dominant Color and Palette Using Color Thief

Things to notice for sign-up design

You registered yourself successfully!!!

What Is a Web Design Proposal? (And How to Write One)

Pet Care App