I created count up stagger animation using react-spring

Hi,there.

I created count up stagger animation using react-spring.

live demo

demo code

Twiiter

I am interested in react-spring as well as gsap. The official sample took a little time to run, so I rewrote it to work.

"useTransition" allowed me to specify callback functions for "from", "enter", and "leave" events." I wanted to "delay" in order to "stagger", but it seemed to be valid except for "from". Therefore, I specified "delay" for "enter" and "leave" to realize stagger.

const [items, setItems] = useState([]);

const transition = useTransition(items, {
    from: (item) => {
      return {
        transform: `translate3d(0,${-80}px,0)`,
        opacity: 0,
        delay: item.delay,
      };
    },
    enter: (item) => async (next) => {
      await next({
        transform: `translate3d(0,${item.y}px,0)`,
        opacity: 1,
        delay: item.delay,
      });
      await next({
        transform: `translate3d(${item.x}px,${item.y}px,0)`,
        opacity: 1,
        delay: item.delay,
      });
    },
    leave: (item) => async (next) => {
      await next({
        transform: `translate3d(0,${80}px,0)`,
        opacity: 0,
        delay: item.delay,
      });
    },
  });

Then useState to change the state every 2 seconds to fire the transition in the demo.

useEffect(() => {
    setTimeout(() => {
      setItems((e) => {
        return e.length
          ? []
          : [
              {x: 0, y: 0, delay: 100, fig: 1},
              {x: 0, y: 0, delay: 200, fig: 2},
              {x: 0, y: 0, delay: 300, fig: 3},
              {x: 0, y: 0, delay: 400, fig: 4},
            ];
      });
    }, 2000);
  }, [items]);

At the end, you will see the following demo video

See you then, Have fun.