React-Spring: Kickstart your Animation Experience!
Hi there! đź‘‹ This repo includes all demo's referenced in my react-spring talk at the React NYC Meetup on Oct 7, 2019.
How to use this repo
PDF)
Slide Deck: (The 'Sneak Peek' demo
- That great tossing cards demo was not mine, but it's a superb example to get excited about. Please check it out, along with the other demo's on the react-spring site.
All other demos:
Run/tweak the code remotely on Code Sandbox (no git clone needed)
- Demo #1 - Simple useSpring() Intro and walkthrough
- Demo #2 - useSpring() applied twice
- Demo #2.1 - Simple Refactor for the useSprings() hook
- Demo #3 - useSprings() for a list
- Demo #4 - Modal with useTransition()
- Demo #5 - React-Three-Fiber and React-Spring
- Note: The react-three-fiber demo runs best on Chrome, the TextGeometry piece in particular is quite heavy to render!
React-Spring V9 (beta) Demos
- Notes:
- The V8->V9 (beta) update is fairly straightforward for all hooks except for useTransition, which had important changes
- Demos 4 and 5 have the changes for useTransition(). Many thanks to Alec Larson for assistance in working out issues.
- Demo #1 - Simple useSpring() Intro and walkthrough
- Demo #2 - useSpring() applied twice
- Demo #2.1 - Simple Refactor for the useSprings() hook
- Demo #3 - useSprings() for a list
- Demo #4 - Modal with useTransition()
- Demo #5 - React-Three-Fiber and React-Spring
OR... Run the code locally
-
Requirements
-
To run
git clone
the repoyarn install
- Run
yarn start
(this repo is built with create-react-app, so typical commands apply)
-
SpringV9 Branch
- React-Spring v9 is used in this branch to update all demos.
- Note that Demo 5 is currently commented out due to a bug I'm working thru - The demo #5 for v9 on CodeSandbox above works ok at present.
Links:
-
Talks to see/read:
- Cheng Lou's react-europe talk introducing react-motion
- Christopher Chedeau's React-Rally 'animated' talk
- Paul Henschel's blog on creating react-spring
- React-Spring Website
- React-Three-Fiber github/docs
- BONUS: Check out his brand new (and incredible) examples page
- Jason Lengstorf's Learn with Jason series
-
Folks to Follow:
- Cheng Lou - @_chenglou
- Christopher Chedeau - @vjeux
- Paul Henschel - @0xca0a
- Sarah Drasner - @sarah_edo
Special Thanks
- Thanks to React NYC for hosting and to everyone in attendance that night
- Thanks to Paul Henschel for creating react-spring and react-three-fiber, along with everyone who create demo's and examples for it
- The mysterious Mr Doob, wherever you are, for creating threejs
Feedback / PR's
Feedback and PR's are welcome! Please add a star to this repo if you found this useful!
Lastly...
Any ideas or feedback please feel free to reach out!
Copyright (c) 2019 Barry May (barry4dev@outlook.com)