pmndrs / pmndrs/react-spring

[bug]: Spring Config function not called when using Imperative API

Open
#2,186 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

area: core kind: bug release: major
Dominant language
TypeScript
Stars
29.1k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Which react-spring target are you using?
  • @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.3

What's Wrong?

I'd like to use the Imperative API (https://react-spring.dev/docs/concepts/imperative-api) with a Spring Config function (https://react-spring.dev/docs/advanced/config#config-per-springvalue) to customize friction, tension, etc per SpringValue, like this:

const springConfig = (key) => {
  if (key === "opacity")
    return { tension: 60, friction: 10, precision: 0.0001 };
  else if (key === "scaleX") return { tension: 58, friction: 4.3 };
  else if (key === "scaleY") return { tension: 70, friction: 4 };
  return {};
};

const animation = useSpringRef();
const springs = useSpring({
  ref: animation,
  from: { opacity: 0, scaleX: 0.96, scaleY: 0.96 },
  config: springConfig
});

but the config function is never called (example: https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js).

To Reproduce

With this minimal snippet:

const springConfig = (key) => {
  if (key === "opacity")
    return { tension: 60, friction: 10, precision: 0.0001 };
  else if (key === "scaleX") return { tension: 58, friction: 4.3 };
  else if (key === "scaleY") return { tension: 70, friction: 4 };
  return {};
};

const animation = useSpringRef();
const springs = useSpring({
  ref: animation,
  from: { opacity: 0, scaleX: 0.96, scaleY: 0.96 },
  config: springConfig
});

Or see this codesandbox: https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js

Expected Behaviour

Spring Config function should be called when using the Imperative API.

Link to repo

https://codesandbox.io/s/react-spring-bug-277lrl?file=/App.js

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked CodeSandbox and compare the documented Imperative API with the per-SpringValue config behavior. Trace how the config function is handled for @react-spring/web when a useSpringRef is supplied; done means the function is called and its per-key tension, friction, and precision values are applied.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.