https://github.com/c-ehrlich/framer-motion-list
Creating an animated list with framer-motion
https://github.com/c-ehrlich/framer-motion-list
Last synced: about 1 year ago
JSON representation
Creating an animated list with framer-motion
- Host: GitHub
- URL: https://github.com/c-ehrlich/framer-motion-list
- Owner: c-ehrlich
- Created: 2022-03-21T21:03:50.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-03-21T21:04:05.000Z (over 4 years ago)
- Last Synced: 2024-10-05T14:41:20.038Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 180 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Framer Motion Animated List
## What is this?
A simple React app that displays a list of item and lets the user add and subtract items, sort the list, and reset to initial state. The list items animate smoothly to make it easier to understand how the list is being modified.
## What did I learn?
Prior to this project I had some difficulties understanding how the different aspects of framer-motion worked together, but by creating this focused demo project I now understand what each aspect does, and how to combine them.
I also learned that there are some edge cases of undocumented behaviour that are frequently recommended in tutorials, but are actually not intended and will be caught if framer-motion is used with TypeScript. One example of this is passing a style prop that changes based on the `useIsPresent` hook.