(I) Slide Around

What we're gonna be building

Code

import { animated, useSpring } from "@react-spring/web";
import React, { useEffect, useState } from "react";

const SlideAround = () => {
  const [animate, setAnimate] = useState(false);

  const { translation } = useSpring({
    from: { translation: animate ? 0 : 100 },
    to: { translation: animate ? 100 : 0 },
  });

  useEffect(() => {
    const timeout = setTimeout(() => {
      setAnimate(!animate);
    }, 1000);
    return () => {
      clearTimeout(timeout);
    };
  }, [animate]);

  return (
    <animated.div
      style={{
        width: 80,
        background: "#ff6d6d",
        height: 80,
        borderRadius: 8,
        x: translation,
      }}
    />
  );
};

Code Breakdown

The above code can be divided into 3 sections

1. Animation definition

const [animate, setAnimate] = useState(false);

const { translation } = useSpring({
  from: { translation: animate ? 0 : 100 },
  to: { translation: animate ? 100 : 0 },
});

• react-spring provides a useSpring hook, which is a animation controller of sorts.

• it provides configuration of variety of parameters, but to keep things simple, we will use the to and from parameters for setting-up an initial and final position for our animation and let react-spring take care of the rest.

• with a mutable state variable, we will tell react-spring that we want to either move from 0 to 100 or move from 100 to 0 based on what the animate variable is set to, where 0 and 100 refer to the range between which we will apply our transform translate value in CSS.
  (NOTE: this is done via the animated component, by react-spring, as mentioned below)

• notice how we're destructuring translation from the useSpring hook, this is because, useSpring is actually computing a realtime value for us, based on our to and from parameters, on, the translation key of the object
  (NOTE: this key can be anything that the user specifies).
  This key is then returned to us, by the useSpring hook, in the form of a continuously changing (animating) value.
  learn more about useSpring() hook

2. Animation control

useEffect(() => {
  const timeout = setTimeout(() => {
    setAnimate(!animate);
  }, 1000);
  return () => {
    clearTimeout(timeout);
  };
}, [animate]);

• This code block is simply meant to trigger the animation every 1 second.

• By calling setAnimate, with a true or false alternatively, we force our useSpring hook, to return us a value
  that triggers animation, between the to and from specified.

3. component declaration

<animated.div
  style={{
    width: 80,
    background: "#ff6d6d",
    height: 80,
    borderRadius: 8,
    x: translation,
  }}
/>

• finally, we simply apply the transformation (stored on transition variable) onto our animated component, in the axis we want the component to translate along.

• we use the animated.div component provided by react-spring library, as it consumes the provided transformation, via the useSpring hook, and tries to apply a valid animation onto the specified style property.
  In our case, we use the the x property, as it refers to the translate property in CSS, for x-axis.
  (NOTE: this interpretation is done by react-spring automatically)
  learn more about <animated /> elements

Conclusion

I hope that cleared up the basics of working with react-spring, if so, lets move onto the next tutorial, where we make a box shrink and expand!