fireship-io/framer-demo

Framer motion demo with React

Creating modals in React Framer Motion

1. Features
2. Installation
3. Set up
4. Live Demo

What is Framer Motion?

Framer Motion is a relatively new open source, production-ready animation library for React developers.

Framer Motion docs

Features include:

• Spring animations
• Simple keyframes syntax
• Gestures (drag/tap/hover)
• Layout and shared layout animations
• SVG paths
• Exit animations
• Server-side rendering
• Variants that orchestrate animations across components
• CSS variables

Installation

Create a new React project

$ npx create-react-app framer-demo

Open your new React app

$ cd react-framer-demo

Install the Framer Motion package

$ npm i framer-motion

Set up

Project structure

framer-demo
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── hooks
    │   └── useModal.jsx
    ├── components
    │   ├── Modal
    │   │   └── index.jsx
    │   ├── Backdrop
    │   │   └── index.jsx
    │   ├── Notification
    │   │   └── index.jsx
    │   └── Input
    │       └── index.jsx
    ├── App.jsx
    ├── stateLogger.js
    ├── arr-utils.js
    ├── index.css
    └── index.js

framer-demo's Issues

Drag feature in Firefox doesn't appear to work.

I tried using the website inside Google Chrome and Mozilla Firefox. The drag feature worked in Chrome, but not in Firefox. What kind of fix would make it work in Firefox, as I am interested in potentially using framer for a learning project.