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

Slide Deck: (PDF)

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

  • NodeJS 10 for running
  • Yarn for packaging
  • Suggested IDE is VSCode, but any IDE should work

• To run

  • git clone the repo
  • yarn 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
    • Paul Henschel talks about React-three-fiber
    • Sarah Drasner talks about three.js

• 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 ([email protected])