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.div
initial="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