Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/gillkyle/egghead-framer-motion

Examples accompany egghead videos teaching how to use Framer Motion
https://github.com/gillkyle/egghead-framer-motion

Last synced: 16 days ago
JSON representation

Examples accompany egghead videos teaching how to use Framer Motion

Host: GitHub
URL: https://github.com/gillkyle/egghead-framer-motion
Owner: gillkyle
License: mit
Created: 2019-10-25T19:01:17.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-01-04T12:42:34.000Z (almost 2 years ago)
Last Synced: 2024-10-17T16:12:22.261Z (27 days ago)
Language: JavaScript
Homepage: https://egghead.io/playlists/animating-react-components-with-framer-motion-acecb152?af=z9q2z
Size: 1.79 MB
Stars: 4
Watchers: 1
Forks: 1
Open Issues: 25
Metadata Files:
- Readme: README.md
- License: LICENSE

This repository includes examples for using Framer Motion with accompanying videos on Egghead.

## Examples

Several examples are included, among them:

### Simple Position animation

![01](https://raw.githubusercontent.com/gillkyle/images/master/egghead-framer-motion/01.gif)

### Keyframe animation

![02](https://raw.githubusercontent.com/gillkyle/images/master/egghead-framer-motion/02.gif)

### Gestures (hover/tap) animation

![03](https://raw.githubusercontent.com/gillkyle/images/master/egghead-framer-motion/03.gif)

### Loading animation

![04](https://raw.githubusercontent.com/gillkyle/images/master/egghead-framer-motion/04.gif)

### Varying state animations

![05](https://raw.githubusercontent.com/gillkyle/images/master/egghead-framer-motion/05.gif)

### Children animations with variants

![06](https://raw.githubusercontent.com/gillkyle/images/master/egghead-framer-motion/06.gif)

## Running locally

Clone the repository:

```
git clone https://github.com/gillkyle/egghead-framer-motion
```

Navigate to the root:

```
cd egghead-framer-motion
```

Install dependencies:

```
yarn
```

Run:

```
yarn start
```