Reset: true breaks reverse animation

[clse]

🐛 Bug Report

I have a flip-like animation where items grow from a dynamic width/height/x/y to full width modals. Without reset:true, it seems to cache the last measurements' values and therefore doesn't work until I click it again at the correct position and it stores the right values.

When I use reset: true, it works perfectly, but just doesn't run the reverse animation. It just disappears on reverse without executing the animation

Here's my code:

  const containerRef = useRef();
  const contentRef = useRef();
  const config = { mass: 5, tension: 4000, friction: 400 };
  const getPercent = (x, y) => `${(x / y) * 100}%`;

  const widthPercent = useMemo(
    () => getPercent(measurements.width, window.innerWidth),
    [measurements.width]
  );

  const heightPercent = useMemo(
    () => getPercent(measurements.height, window.innerHeight),
    [measurements.height]
  );

  const overlayAnimation = useSpring({
    ref: containerRef,
    unique: true,
    reset: true,
    from: {
      width: widthPercent,
      height: heightPercent,
      transform: `translate3d(${measurements.x}px, ${measurements.y}px, 0)`,
      opacity: 0,
      pointerEvents: "none",
    },
    to: {
      width: overlayOpen ? "100%" : widthPercent,
      height: overlayOpen ? "100%" : heightPercent,
      transform: overlayOpen
        ? `translate3d(0,0,0)`
        : `translate3d(${measurements.x}px, ${measurements.y}px, 0)`,
      opacity: overlayOpen ? 1 : 0,
      pointerEvents: overlayOpen ? "auto" : "none",
    },
    config: config,
  });

  const transitions = useTransition(
    overlayOpen ? overlayItems : [],
    (item, index) => index,
    {
      ref: contentRef,
      unique: true,
      from: { opacity: 0, transform: "translateX(-70%)" },
      enter: { opacity: 1, transform: "translateX(0)" },
      leave: { opacity: 0, transform: "translateX(70%)" },
      config: { mass: 10, tension: 2000, friction: 350 },
    }
  );

  useChain(
    overlayOpen ? [containerRef, contentRef] : [contentRef, containerRef],
    [0, overlayOpen ? 0.3 : 0.4]
  );

The problematic animation is the spring overlayAnimation. It grows perfectly to width/height 100% but on reverse just suddenly disappears (as if display: none was set).

Environment

• react-spring latest
• react latest

[aleclarson]

Please provide a minimal sandbox (fork this one) or .git url that shows the issue. 👍

[clse]

https://codesandbox.io/s/gifted-star-2ixzl?file=/src/App.js

[aleclarson]

Without reset:true, it seems to cache the last measurements' values and therefore doesn't work until I click it again at the correct position and it stores the right values.

Can you reproduce this part?

[aleclarson]

The reset prop shouldn't be used here. It forces the animation to start at the from values.

If you can reproduce the unexpected caching of old measurements, we can fix your problem "the right way".

Otherwise, you can use this workaround: Keep reset: true and ensure the from values are always opposite the to values (using the open boolean). Caution: This will cause a jump when you click the button twice in quick succession.

[clse]

Thanks so much for clarifying. I’ll work on a new sandbox and share it shortly!

[clse]

Hey @aleclarson here's the new sandbox: https://codesandbox.io/s/nice-leakey-bhizi?file=/src/App.js

[aleclarson]

It seems to work correctly on my machine. 🙃

[clse]

Resize the window. The values don’t update when the width changes despite measurements being set on click. This does work with reset: true but not without it.

[aleclarson]

Ah I see, thanks for the info!

I swapped out your custom measurements with react-use-measure (made by @drcmda) and your example now works as expected, even when resizing the window.

Example: https://codesandbox.io/s/nervous-moon-djb1e?file=/src/components/Item/Item.component.jsx

PS: You can become my patron to support my work.