React Framer Motion JavaScript animation

Animating React Components with Framer Motion

黃勝杰 2020/09/30 10:13:22

0 3256

Introduction

Framer Motion is an animation library for React. With its simple and intuitive syntax, we can easily apply animations and transitions to React components without breaking changes and rewriting. In the following paragraphs, I am going to introduce the basics of how to use Framer Motion.

Quick Start

Installation

npm install framer-motion

Importing

import { motion } from "framer-motion"

Animating Elements

To make an element into a motion element, we can simply add motion. in the front of whatever DOM element it is, for example, a div element. This returns us a new motion component which will still be a div when it’s rendered to the DOM, however, it now comes with some extra attributes that we can use to animate the element.

For animating a motion element, all we need to do is adding an animate attribute. In this attribute, we need to pass an object which represents the different properties of this element that we want to animate.

For example, we can enlarge the font-size of div to 50px and make it move from the top to the center when it’s loaded by passing an object { fontSize: "50px", y: "-50vh" }.

Initial Animation State

Another attribute that we can use in motion element is initial attribute. Initial attribute allows us to set an initial state of an element to control how or where the animation starts and that adds flexibility to this animation since we can now control the start point and the end point.

For example, we can pass an object { rotateZ: 180 } in initial attribute if we want to rotate an element which is up-side-down initially.

Transition Options

transition attribute provides us a way to control how an animation works from the beginning to the end(initial → animation), such as its duration, delay and easing functions.

For example, we can move an element from the top and make it bounce up and down like a spring when it reaches the center in 1 second by passing an object { duration: 1, type: "spring" } and delay displaying an element and let it fade-in very slowly by passing an object { delay: 1, duration: 5 }.

Hover Animation

We can also animate an element when we hover over it by using whileHover attribute. The rules are the same as we use animate attribute.

For example, we can enlarge an element as we hover over it by passing an object { scale: 1.1 } in whileHover attribute.

Variants

Variants allow us to extract the initial, animate, transition objects into an outside object which we can reference. That helps us to keep our code clean. Secondly, it allows us to propagate variant changes down through the DOM resulting in cleaner code as well. In addition, it let us create timing relationships between parent motions and children motions using transition orchestration properties.

Hence children motion elements inherit their parent variants setting, we can leave out initial and animate attributes if they have the same setting pattern.

Inside parent variants, we use an orchestration property called when. It detects when the parent animation should occur in relation to any children elements which are animating as well.

when: "beforeChildren" → Parent animation will complete before any children animations occur.

Another orchestration property is staggerChildren. It staggers the animation of each children elements by x amount so that all children elements animate one after another for a nice little effect.

Keyframes

Keyframes provide us a way to transition elements through several animations in turn. We use an array as property value and each value in the array represents a different keyframe. Then the element will animate each one of the keyframes in turn.

For repeating an animation, instead of just increasing the amount of keyframes we can use a transition property called yoyo. Yoyo property allows us to repeat an animation as many times as we want, even infinity.

Animating SVGs

By using pathLength property, we can animate the SVG paths as though they are being drawn on the screen. PathLength is the actual path of the SVG and the path starts with pathLength 0 and ends with 1. With the transition properties duration and ease, we have more control of the animation.

Wrapping Up

In this article, we have seen how easy it is to animate React components with Framer Motion. However, there are a lot of features which are not covered in the article - gestures, dragging and much more. If you are interested in learning more about Framer Motion, I encourage you to check out Framer Motion Docs for more information.

Reference

Framer Motion

Framer Motion API

Framerbook

Framer Motion (for React) Tutorial - The Net Ninja