React-spring: Interpolation doesn't work with useChain hooks API

[afisher88]

🐛 Bug Report

When using the useChain hooks API, interpolation doesn't work.

To Reproduce

I have a relatively simple animation that I want to run sequentially using the useChain API. I have just converted my wrapperProps spring to use a ref and this has resulted in my width interpolation animation breaking:

Breaking Snippet

width: wrapperProps.width.interpolate(value => `${value}%`)

Full code

import React, { useRef } from 'react';
import { NavLink } from 'react-router-dom';
import { useSpring, useChain, animated } from 'react-spring';
import { animationConfig } from './sideNav.config';

export default function SideNavNavLink({
  hasChildren,
  icon,
  isIconView,
  title,
  url,
  visible
}) {
  const tabIndex = visible ? undefined : -1;
  const titleAttr = (isIconView && title) || undefined;

  const wrapperRef = useRef();
  const wrapperProps = useSpring({
    config: animationConfig,
    ref: wrapperRef,
    opacity: isIconView ? 0 : 1,
    width: isIconView ? 0 : 100
  });

  const titleRef = useRef();
  const titleProps = useSpring({
    display: isIconView ? 'none' : 'block',
    ref: titleRef
  });

  // Chain animation order
  useChain([wrapperRef, titleRef]);

  return (
    <NavLink
      className="side-nav__nav-link"
      to={url}
      tabIndex={tabIndex}
      title={titleAttr}
    >
      {icon && (
        <img
          className="side-nav__nav-link__icon"
          src={`${process.env.PUBLIC_URL}${icon}`}
          alt=""
        />
      )}

      <animated.div
        className="side-nav__title-animation-wrapper"
        style={{
          ...wrapperProps,
          width: wrapperProps.width.interpolate(value => `${value}%`)
        }}
      >
        <animated.span
          className="side-nav__nav-link__title"
          style={{ ...titleProps }}
        >
          {title}
        </animated.span>
        {hasChildren && hasChildren.length > 0 && (
          <span className="side-nav__nav-link__collapse-icon" />
        )}
      </animated.div>
    </NavLink>
  );
}

This results in "Cannot read property 'interpolate' of undefined" whereas if I take the ref out it works fine but I can't chain my springs.

I've tried changing the values to '0%' and '100%' and whilst this solved the error by taking out the interpolate statement, the animation jumps from 0% to 100% and doesn't interpolate the in between values.

Expected behavior

I would expect to be able to still perform interpolation with my values.

Environment

• react-spring v8.0.19
• react v16.8.6

[aleclarson]

This might be fixed by #632. Can you give it a try with the v9 branch?

git clone https://github.com/react-spring/react-spring.git --branch v9 --depth 1
cd ./react-spring
yarn
cd ./dist && yarn link

# In your repro directory:
yarn link react-spring

[afisher88]

I'm having trouble getting the symlink to work. I'm not using yarn, but using npm link in cloned dir and then in my repo results in "Module not found".

Creating the symlink looks like it's working in cloned directory.

Is there an alternative way of testing this? I tried importing from cloned path but this didn't work either.

[aleclarson]

Whoops, I forgot to include cd ./dist before yarn link in the react-spring directory. Try the steps in my previous comment again, please. I'll try to check it out today, too.

[afisher88]

Ah, thanks. That was it!

Okay, I'm getting a different error now. I'm not sure if this is something to do with my code or the library. From what I can work out I am only calling the hook from inside the function body, its not in a conditional.

[aleclarson]

That error often occurs when two React versions exist in the same bundle. To save you the trouble, I'll check this out today. 👍

[afisher88]

Great, thanks.

[aleclarson]

Ah, just realized you haven't setup a CodeSandbox yet. Please do that so I can help you out.

[afisher88]

Please see https://github.com/afisher88/react-spring-playground

When built, select the "chain" animation link.

Uncomment line 53: width: animation1Props.width.interpolate(value => ${value}%)

to trigger error.

[aleclarson]

I'm not seeing the "chain" example, and the other examples are 404s. Maybe you forgot to git push?

[aleclarson]

Alternatively, you could clone react-spring-examples and add a test module to demos/tests/.

[afisher88]

Argh, no I hadn't. Sorry.

I've updated now. I'm not sure why the links were 404ing. I just checked out a fresh copy onto a new machine and they work for me after building. I've changed the animation to make it a bit more obvious but the animations now seem to be running in parallel.

[aleclarson]

Fixed in #632 🎉

It had nothing to do with the interpolate call. The useChain function needed a rewrite.

Side note: You don't need to interpolate in your example, because react-spring is smart enough to support { width: toggle ? '100%' : '50%' }. 😄

[afisher88]

Awesome, thanks so much for looking at that for me. I'll try again with V9.

[aleclarson]

You can use v9 like this now: yarn add react-spring@next

[afisher88]

Can confirm v9.0.0 fixes my issue.