Everything you need to know about React Animation

React-Spring Fundamentals

Since React-Spring is a modern animation library, it supports both hooks-based API and the traditional class-based API. The hook-based API is based on 5 kinds of hooks while the class-based API is based on the react-spring components. As the React community is now focussing on functional components for simplicity so we will proceed with the hooks API. These concepts can be interpreted with the class-based API as well because the basics remain the same.

  1. useSpring — a single spring that moves data from a → b
  2. useSprings — multiple springs, for lists, where each spring moves data from a → b
  3. useTransition — where we need to mount(add)/unmount(remove) elements transitions
  4. useTrail — multiple springs where one spring trails/follows behind the other.
  5. useChain — to queue or chain multiple animations together.

A Basic Demo

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store