Reset: true breaks reverse animation

🐛 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]

Alright, alright, fair enough 😉 haha

Thanks for the help. Just curious though, is there a way to force recalculations on each animation? (which is why i assumed reset was for?)