react-tiny-spring

react-tiny-spring is an animation library for React or Preact users.

🚴 Spring Animation can be realized in 1kb
💞 Do not need the original component like <Animated>
🙈 But does not support complex animations currently

Currently, it is also an experimental library. We are asking for many opinions. Please watch if you are interested.

Installation

react-tiny-spring is provided by npm package.

# For react
$ yarn add -D react-tiny-spring
# For preact
$ yarn add -D preact-tiny-spring

Build Examples

$ git clone git@github.com:mkazutaka/react-tiny-spring.git
$ yarn install
$ yarn build
$ yarn start:react

Exampels

Preact Spring Tiny Examples

How to use

import { useSpring } from 'react-tiny-spring'

const App = () => {
  const ref = useRef(null);
  let currentX = 0;
  const animate = useSpring(ref, (v) => ({
    // key name x is used by animate function
    transform: `translate3d(${v.x}px,0,0)`
  }));

  const animateLeftRight = () => {
    currentX = currentX === 0 ? 300 : 0;
    animate({to: { x: currentX }})
    setTimeout(animateLeftRight, 1000)
  };

  useEffect(() => {
    animateLeftRight()
  }, [animate]);

  return <div ref={ref}/>
};

useSpring receives two arguments and return one function.

The first argument is the Ref Object. useSpring overwrites Elements's style directory through Ref Object, so you need to provide that.

The second is function. To apply animation transitions to the element, You need to specify what animation to achieve.

useSpring return animate function. Animation Function receive object that has to. to is goal of animation.

In this example, x is an arbitrary name. So you can change the value name. However, the key name used in the animate function and the value passed in the second argument must be the same.

Acknowledgment

This library is inspired from many libraries such as react-spring, react-motion, and anime.js. Many thanks to the creators and contributors of these libraries