Introduction
react-magic-motion logo

react-magic-motion

Introduction

react-magic-motion is a react.js library that ✨ magically animates your components.

Demo

Getting Started

Installation

Install
npm i react-magic-motion

Basic Usage

  • react-magic-motion provides <MagicMotion /> for automatic animation of your components.
  • In the example, clicking the button will animate the list items in and out of the DOM.
  • To see more examples, click here

Example

My Goals

  • 🏀 Make 10 three pointers in a row
  • 🏋️‍♂️ Bench press 225 lbs
  • 🏃‍♂️ Run a 5k in under 20 minutes

Sample Code

my-goals.js
import { useState } from "react";
import { MagicMotion } from "react-magic-motion";
 
function ListItem({ children }: { children: string }) {
  return (
    <li
      style={{ backgroundColor: "rgb(239 239 239)", width: "20rem", padding: "0.5rem" }}
    >
      {children}
    </li>
  );
}
 
export function MyGoals() {
  const [areGoalsShowing, setAreGoalsShowing] = useState(true);
  return (
    <MagicMotion>
      <div
        style={{
          marginTop: "0.75rem",
          display: "flex",
          flexDirection: "column",
          gap: "1rem",
          overflow: "hidden",
        }}
      >
        <h1 style={{ fontWeight: "bold" }}>My Goals</h1>
        {areGoalsShowing && (
          <ul
            style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}
          >
            <ListItem>🏀 Make 10 three pointers in a row</ListItem>
            <ListItem>🏋️‍♂️ Bench press 225 lbs</ListItem>
            <ListItem>🏃‍♂️ Run a 5k in under 20 minutes</ListItem>
          </ul>
        )}
        <button
          style={{
            width: "fit-content",
            whiteSpace: "nowrap",
            padding: "0.5rem 1rem",
            backgroundColor: "#5a70ed",
            color: "#ffffff",
          }}
          onClick={() => setAreGoalsShowing(!areGoalsShowing)}
        >
          {areGoalsShowing ? "Hide" : "Show"} my goals
        </button>
      </div>
    </MagicMotion>
  );
}
 

About

Info

  • react-magic-motion provides the <MagicMotion /> component for automatic animation of your components.
  • The <MagicCard /> and <MagicTabSelect /> components are built on top of <MagicMotion /> and to provide a more specific use case for automatic animation.
  • react-magic-motion's only dependency is framer-motion as the automatic animation is built off of framer-motion's layout animations.

Package Comparisons

react-magic-motion@formkit/auto-animate
"linear" easing✅✅
"spring" easing✅❌
shared layout animations✅❌
multi-framework support❌✅
smooth animation cancelling✅❌