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,…

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.

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.

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

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

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

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:

Software Engineer

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