UseSprings won't run a second time from another component

[bknill]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.7.2

What's Wrong?

I'm using useSprings in 2 different places in my app.

They both work individually, but after one has been used, the other one won't run.

  const attribs: any = (i: number) => {
    return {
      x: i * width,
    };
  };
  const [props, api] = useSprings(nodes.length, attribs);
  const update = index => {
    api({ config: { duration: 500, ...config.gentle, easing: easings.easeInOutQuad } });
    api.start(i => {
      const x = (i - ref.current) * width;
      return { x };
    });
  };

 {props.map(({ x }, i) => (
          <animated.div className={'absolute w-3/4 h-3/4 m-10'} key={i} style={{ x }}>
            {pages[i]}
          </animated.div>
        ))}

To Reproduce

Run this in 2 different components and switch between them.

Expected Behaviour

Both animations to run as expected

Link to repo

not possible

[joshuaellis]

Can you please supply a minimal reproduction of your issue e.g. using codesandbox :) this helps ensure it's the library causing the issue, not your code.

[bknill]

I tried setting it up here https://codesandbox.io/s/zen-tristan-8r4yf4?file=/src/App.tsx

But this is working as expected.

Its very strange, difference in my code is that components are on different routes maybe. But it's basically the same thing, 2 components using very similar useSprings. Individually they work fine, if you load one, then load the other and return to the first one it won't animate.

[bknill]

I tried console logging the springRef and it seems the controller gets emptied when I leave this component.

[bknill]

Something unrelated causing problem

[bknill]

@joshuaellis OK found the problem.

It's mixing @react-spring/web and @react-spring/three

I am using React Three Fiber, if I take out the component the problem goes away. It's very strange but setup is

• Player (has both web and three)
• Carousel (has web only)

If I load the Player, both web and three work fine together no issues. If I load Carousel, it works fine first of all, then if I go to Player, both web and three work fine together.

Problem is when I return to Carousel, animations stop all together.

This is the problem. I have this animation in Three. If I remove this from the Player component, the animation in Carousel works fine.

  const fadeAttribs = useMemo(() => {
    return {
      brightness: -0.15,
      contrast: -0.15,
      saturation: -0.15,
      bloom: 0.5,
      noise: 0.5,
      vignetteOffset: 0.05,
      vignetteDarkness: 0.7,
    };
  }, []);

  const unfadeAttribs = useMemo(() => {
    return {
      brightness: sceneConfig?.brightness || 0,
      contrast: sceneConfig?.contrast || 0,
      saturation: sceneConfig?.saturation || 0,
      bloom: 0,
      noise: 0,
      vignetteOffset: 0,
      vignetteDarkness: 0,
    };
  }, [sceneConfig]);

  const [styles, api] = useSpring(() => ({
    from: fadeAttribs,
    to: unfadeAttribs,
    onChange: ({ value }) => {
      if (brightnessRef.current) {
        brightnessRef.current.brightness = value.brightness;
        brightnessRef.current.contrast = value.contrast;
      }
      if (saturationRef.current) saturationRef.current.saturation = value.saturation;
      if (bloomRef.current) bloomRef.current.intensity = value.bloom;
      if (noiseRef.current) noiseRef.current.opacity = value.noise;
      if (vignetteRef.current) {
        vignetteRef.current.offset = value.vignetteOffset;
        vignetteRef.current.darkness = value.vignetteDarkness;
      }
    },
    config: {  duration: 300 },
  }));

  useEffect(() => {
    if (!faded) {
      api({ from: fadeAttribs, to: unfadeAttribs });
    } else {
      api({ from: unfadeAttribs, to: fadeAttribs });
    }
    api.start();
  }, [faded]);

[joshuaellis]

Looks like it could be this issue – https://github.com/pmndrs/react-spring/issues/1586

[bknill]

Cheers @joshuaellis !