https://github.com/aholachek/react-animations-from-scratch

https://github.com/aholachek/react-animations-from-scratch

animation animejs react react-life-cycle transition tutorial

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/aholachek/react-animations-from-scratch
• Owner: aholachek
• Created: 2017-10-29T13:58:58.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-12T21:51:10.000Z (almost 8 years ago)
• Last Synced: 2025-06-14T09:06:17.067Z (4 months ago)
• Topics: animation, animejs, react, react-life-cycle, transition, tutorial
• Language: JavaScript
• Homepage: https://medium.com/@alex_holachek/building-animations-in-react-from-scratch-c66a582c9b65
• Size: 3.61 MB
• Stars: 20
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[This blog post explains the techniques in more depth](https://medium.com/about-codecademy/building-animations-in-react-from-scratch-c66a582c9b65)

# Building animations in React from scratch

## 1. Basic sequenced enter & exit

![enter and exit animation](./gifs/basic_enter_exit.gif)

- [Live example](http://alex.holachek.com/react-animations-from-scratch/?selectedKind=Animation%20Examples&selectedStory=1.%20The%20basic%20technique&full=0&down=1&left=1&panelRight=0)

- [Code](./src/examples/BasicEnterExitExample)

## 2. Grouping items

![grouping items transition](./gifs/group_update.gif)

- [Live example](http://alex.holachek.com/react-animations-from-scratch/?selectedKind=Animation%20Examples&selectedStory=2.%20Object%20persistence&full=0&down=1&left=1&panelRight=0)

- [Code](./src/examples/GroupItemsExample)

## 3. Enter/update/exit

![enter/update/exit animation](./gifs/array_update.gif)

- [Live example](http://alex.holachek.com/react-animations-from-scratch/?selectedKind=Animation%20Examples&selectedStory=3.%20Enter%2C%20update%20and%20delete%20transitions&full=0&down=1&left=1&panelRight=0)

- [Code](./src/examples/ArrayUpdateExample)