useSpring won't animate on prop change

Question

As opposed to what is mentioned in Spring's documentation, useSpring does not animate my counter component on prop change:

If you re-render the component with changed props, the animation will update.

I've tried passing the props as children, to no effect. What am I missing? Here's a demo: https://codesandbox.io/s/spring-counter-jsylq?file=/src/App.js:199-230

import React, { useState } from "react";
import { animated, useSpring } from "react-spring";

const Counter = ({ value }) => {
  const anim = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } });

  return <animated.h1 style={anim}>{value}</animated.h1>;
};

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Counter value={count} />
      <button onClick={() => setCount(count + 1)}>increment</button>
    </>
  );
}

score 4 · Accepted Answer · answered Sep 19 '20 at 18:27

4

It only said the animation will update. But now the animation is kind of static.

You can do a couple of things. If you add the reset property then it will repeat the initial animation at every re-render.

const anim = useSpring({ from: { opacity: 0 }, to: { opacity: 1 } , reset: true});

Or you can add some properties depending of the count value. For example the parity. Odd became blue, even number to red.

const anim = useSpring({ from: { opacity: 0 }, to: { opacity: 1 , color: value % 2 === 0 ? 'red' : 'blue'} });

What do you think?

https://codesandbox.io/s/spring-counter-forked-znnqk

answered Sep 19 '20 at 18:27

Peter Ambruzs

7,763
3
30
36

The reset property did it for me. Jeez I can't believe I hadn't come across that yet. Thank you. – adstwlearn Apr 01 '21 at 05:06
This works, but it re-runs the animation on ANY state change. Is there a way to choose which change? (like useEffect dependencies) – Elron Jul 30 '21 at 16:27
@Elron you can create a variable for the reset, and you can update this variable as you want. Even in a useEffect hook. – Peter Ambruzs Jul 30 '21 at 21:31
1

how? `reset: variableName` ? – Elron Jul 31 '21 at 01:08

useSpring won't animate on prop change

1 Answers1