React-spring: v9.0.0-beta.34 • Feedback wanted

[aleclarson]

Replaced by #985

[brunolemos]

noticed a useTransition regression, my modal close animation stopped working after upgrading (it's now opening with animation and closing instantly on v9)

https://github.com/devhubapp/devhub/blob/6aa24bb96658ce2541f69f9eccfc3d65826c726b/packages/components/src/components/modals/ModalRenderer.tsx#L130-L172

[aleclarson]

@brunolemos Your code looks fine at first glance.

Can you reproduce in react-spring-examples, maybe?

[dbismut]

Everything’s fine, I think there’s a minor regression on useSprings that no longer accepts set({...}) and requires set(i => ({...})) but I believe this was undocumented anyway!

[aleclarson]

@dbismut That should still be supported. The implementation is here:

https://github.com/react-spring/react-spring/blob/ee4467412626a423702700338e965b420200c723/src/useSprings.js#L29-L37

[dbismut]

Hmm... in my case I noticed a regression when upgrading to @next, I'll have another look.

[drcmda]

A beta feedback playground is a super nice idea @aleclarson let's make this a perfect release for everyone 😍👍You think i should tweet this out for exposure?

[dbismut]

@aleclarson Here is a csb that shows the problem:
https://codesandbox.io/s/003pl8m2vn

You can uncomment line 12 and comment line 13 to see the difference when dragging the colored squares or clicking the button. In the first case, only the first square moves.

I can create an issue if you'd like!

[flsilva]

Hello there!

I've just found this issue and would like to mention that I created an issue (and repo reproducing it) that affects 9.0.0-beta.1, but also 8.0.19.

https://github.com/react-spring/react-spring/issues/646

Thank you for your time and work, react-spring is awesome I've been using it since 5.x!

[pbock]

The beta speeds up TypeScript considerably for me (resolving #613), but the typings seem to be buggy, causing errors where there shouldn’t be any. I’ve opened a separate issue for this: #653

[aleclarson]

9.0.0-beta.2 is now available! 🎉 Please give it a test drive. 👍

• lots of TypeScript fixes
• all entry points now have a .d.ts module
• minor fixes to useSpring 92c0e484eb837f59d079ea31f634974bb3a2b291
• minor fixes to useTrail 7c557bd8d7b45c73433f47810e48217ba376b5ed
• added support for config.decay to be a number

edit: There seem to be some TypeScript issues, so I'll be publishing another beta in a bit.

[aleclarson]

9.0.0-beta.3 is now available 👀😲

[sjnonweb]

I noticed a regression with useTrail in this release, so when the number of items is 0 then i get an error saying Cannot read props of undefined.~

I'll try to create a repro when i get the time.

code snippet:

const data = [];
const trails = useTrail(data.length, {
  config: config.stiff,
  from: {
    rotate: -90
  },
  rotate: 0,
});

[Ne3l]

The transition component crashes when the children is a boolean instead of a function but this change from 8.0.19 is not specified as breaking change on the changelog.

Created a minimal repro case, hope it helps: https://codesandbox.io/s/vv9jk778ly

[aleclarson]

@sjnonweb Bug confirmed: https://codesandbox.io/s/04058yr1pv

edit: Fixed in the next beta 🎉

[aleclarson]

@dbismut A new issue would be great! https://github.com/react-spring/react-spring/issues/642#issuecomment-485829276

[aleclarson]

@Ne3l Thank you. That will be fixed in the next beta. https://github.com/react-spring/react-spring/issues/642#issuecomment-487653288

[aleclarson]

9.0.0-beta.4 is now available 🐉

See the commits here: https://github.com/react-spring/react-spring/compare/7c775a7e2fc8e2a0061a8762665c274c392b09b7...a0c2e843fc899052fd2ec3967aa9be92fe0cf324

[dbismut]

@aleclarson no big deal at all, just wanted to say that this line seems useless in useTrail:

https://github.com/react-spring/react-spring/blob/31200a79843ce85200b2a7692e8f14788e60f9e9/src/useTrail.js#L30

[aleclarson]

@dbismut I noticed the same thing and removed it in the first beta: 7c557bd8d7b45c73433f47810e48217ba376b5ed 👍

[aleclarson]

9.0.0-beta.5 is now available 🎉

See the commits here: https://github.com/react-spring/react-spring/compare/2fc8d534439de4561e9812db0991e54500e972c6...4e2cbbaba586e6091ac075e65b1e41681a68519a

[ehellman]

Strange, I'm getting the Type instantiation is excessively deep and possibly infinite.ts(2589) error from this:

  const transitions = useTransition(snacks, item => item.key, {
    from: { opacity: 1, height: 0, life: '100%' },
    enter: item => async (next: SpringUpdateFn) =>
      await next({ opacity: 1, height: refMap.get(item).offsetHeight, config }),
    leave: item => async (next: SpringUpdateFn) => {
      console.log('LEAVING');
      await next({
        life: '0%',
        config: { ...config, duration: item.persisting ? 0 : SNACKBAR_DURATION },
      });
      await next({ height: 0, config });
      await next({ opacity: 0, config });
    },
  });
  return transitions.map(({ key, item, props: { life, ...style } }) => {
          return <animated.div key={key} style={style} />;
        })

Getting the error in all v9 betas

[flsilva]

@aleclarson amazing work on these betas, it's exciting to see it evolving so fast!

I can also see the TS error @ehellman mentioned above. Here's a repro:

import React from 'react';
import { View } from 'react-native';
import { animated, useSpring } from 'react-spring/native';

const AnimatedView = animated(View);

export const MyComponent = () => {
  const style = {
    backgroundColor: 'red',
    height: 100,
    width: 100,
  };

  const motionProps = useSpring({
    from: { opacity: 0, scale: 0 },
    opacity: 1,
    scale: 1,
  });
  const motionStyle = {
    ...style,
    opacity: motionProps.opacity,
    transform: [{ scale: motionProps.scale }],
  };

  return (
    <View>
      <AnimatedView style={motionStyle} /> // THIS LINE THROWS THE ERROR
    </View>
  );
};

Error:

error TS2589: Type instantiation is excessively deep and possibly infinite.

Tested with 9.0.0-beta.5.

[cdebotton]

Thank you for your work on this! I'm very excited to have a fully typed version of react-spring.

It seems like the interpolate helper is no longer exported?

Useful in situations like this:

import React from 'react';
import { animated, interpolate, useSprings, useTrail } from 'react-spring';

function Component(items: unknown[]) {
  const trail = useTrail(items.length, {
    from: {
      y: 20
    },
    y: 0,
  });

  const [springs, set] = useSprings(items.length, (i) => {
      return {
        s: 1,
      };
  });

  return trail.map(({ y }, i) => {
    const { s } = springs[i];
    return (
      <animated.div
        onMouseEnter={() => {
          set(i2 => {
            if (i2 === i) {
              return {
                s: 1.1,
              };
            }

            return {
              s: 1,
            }
          });
        }}
        style={{
          transform: interpolate([y, s], (y, s) => {
            return `scale(${s}) translateY(${y})%`
          })
        }}
      />
      );
  });
}

[olapersson]

Great work!

I found a regression, server side rendering no longer works:

6:47:27 PM: error Building static HTML failed for path "/projekt/orion"
6:47:27 PM: See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
6:47:27 PM:   616 |   if (!active) {
6:47:27 PM:   617 |     active = true;
6:47:27 PM: > 618 |     if (manualFrameloop) manualFrameloop();else requestAnimationFrame(update);
6:47:27 PM:       |                                            ^
6:47:27 PM:   619 |   }
6:47:27 PM:   620 | };
6:47:27 PM:   621 |
6:47:27 PM: 
6:47:27 PM:   WebpackError: TypeError: requestAnimationFrame is not a function

Seems to have been solved previously here: https://github.com/react-spring/react-spring/commit/7213e91b7ca6fd83c4ea4582cf950c44ae14deba#diff-fff0687320c3122269fa9422e7739eb0

Also seeing the type instantiation too deep error, with useSprings on web.

error TS2589: Type instantiation is excessively deep and possibly infinite.

[bmcmahen]

v9 is really nice (fully typed ftw), but I'm also running into the server side rendering issue with gatsby. This is with v9.0.0-beta.5

[aleclarson]

9.0.0-beta.6 is now available 🎉

See the commits here: https://github.com/react-spring/react-spring/compare/dd6c5fa...6ba72d2

Note: I haven't looked into the "excessively deep" issue yet (see here).

[phaistonian]

@aleclarson So, latest now points to 9.0.0-beta.6. That's intended, right?

[aleclarson]

9.0.0-beta.7 is now available :tada:

https://github.com/react-spring/react-spring/compare/5c560cb...86d5118

Notable changes:

• Changes to the from prop are now respected when no animations have started yet.
• Default spring precision now defaults to 0.005 instead of 0.01. This should fix any visual glitches at the end of every spring animation.
• Warn when a useChain ref has no animations. This can happen when useSpring is called from a parent component, and then its ref is passed into a child component, which passes the ref into a useChain call. The useSpring call won't have any animations queued up until its child components have finished rendering, and this breaks the chain.
• A new build script, so you can do yarn build -t web -t native --watch when you're working in a local react-spring git clone.
• Changing the cancel prop from true to false should always trigger an animation(s) when it makes sense

[dagstuan]

Hi, I'm using react-spring with typescript, and attempting to build with beta.6 and beta.7 gives me type errors: ...react-spring/lib/common"' has no exported member 'SpringValue'.. Using beta.5 i dont get any type errors. In addition, importing animated causes visual studio code to slow down quite a bit, probably due to how the typings are implemented.. I believe this may be related to #613.

[brunolemos]

Default spring precision now defaults to 0.005 instead of 0.01. This should fix any visual glitches at the end of every spring animation.

Wouldn't that affect performance? Maybe increase the precision internally only when about to hit the end of the animation?

[aleclarson]

@brunolemos The precision is only used to know when a spring has come to a full stop. It should have no bearing on performance. If you can prove otherwise, let me know.

[aleclarson]

9.0.0-beta.8 is now available :tada:

https://github.com/react-spring/react-spring/compare/0ced68d7b3023156f07ae1e225c6de8c50895d58...7a9d6aaeefd80938514a0d727a4fb669019567a1

Notable changes:

• useSpring now returns a new object on every call
• The onFrame prop now receives a new object on every call
• Avoid unnecessary copying of internal data structures when updating animations
• Fixed a bug where the cancel prop (when used with a non-zero delay) could affect updates that were queued later on (especially other delayed updates)
• Changed the destroy method to prevent all future updates forever
• Added a reset method to the Controller class that does what the destroy method used to do (plus a bug fix or two)

[ChrisW-B]

It seems like since beta.5 typescript compilation has been broken ([email protected])

node_modules/react-spring/lib/interpolation.d.ts:32:14 - error TS2304: Cannot find name 'OneOrMore'.

32     parents: OneOrMore<SpringValue>,
                ~~~~~~~~~

node_modules/react-spring/lib/interpolation.d.ts:38:14 - error TS2304: Cannot find name 'OneOrMore'.

38     parents: OneOrMore<SpringValue>,
                ~~~~~~~~~

node_modules/react-spring/lib/interpolation.d.ts:63:54 - error TS2344: Type 'In' does not satisfy the constraint 'readonly any[]'.

63     config: InterpolatorConfig<Out> | InterpolatorFn<In, Out>
                                                        ~~

node_modules/react-spring/web.d.ts:1:10 - error TS2305: Module '"./lib/common"' has no exported member 'SpringValue'.

1 import { SpringValue, Solve, AssignableKeys } from './lib/common'

Let me know if it would be better to split this off to a separate issue!

[rockingskier]

I'm seeing Type instantiation is excessively deep and possibly infinite.ts(2589)

I've tried to make the smallest demo possible to show it as an example.

{
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-spring": "^9.0.0-beta.8",
    "typescript": "^3.4.5"
  },
  "devDependencies": {
    "@types/react": "^16.8.17",
    "@types/react-dom": "^16.8.4"
  }
}

import { animated, useTransition } from "react-spring";

export const Test: React.FC = () => {
  const transitions = useTransition(true, null, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
  });

  return (
    <>
      {transitions.map(
        ({ item, key, props }) =>
          item && <animated.p style={props} key={key}>Words...</animated.p>,
          //      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
          //      Type instantiation is excessively deep and possibly infinite.ts(2589)
      )}
    </>
  );
};

export default Test;

However I also made a Codesandbox and that doesn't error.

[Kukkimonsuta]

There seem to be regression/change of behavior with useTransition where values are cached by key. This is problematic for us because we use this mechanism to skip transitions by using the same key, but still need the new object to be propagated to the view.

Sample:

react-spring 8 - https://codesandbox.io/s/ly068v5x2q
react-spring 9 - https://codesandbox.io/s/434popoxyw

In both cases no animation is expected (correct as the key is always the same), however in v8 item holds newly propagated value whereas in v9 item holds value from previous render.

Is this intended change?

[madou]

using [email protected]

using the example here https://www.react-spring.io/docs/props/gotchas for the manual api

class Test extends React.Component {
  state = { show: true };
  animations = new Controller({ opacity: 0 });
  toggle = () => this.setState(state => ({ show: !state.show }));
  render() {
    const props = this.animations.update({ opacity: this.state.show ? 1 : 0 });
    return (
      <>
        <button onClick={this.toggle}>click</button>
        <animated.div style={props}>I will fade</animated.div>
      </>
    );
  }
}

it just doesn't actually work. any ideas?

also fyi the set state block isn't accessing prevState properly

-toggle = () => this.setState(state => ({show: !show}))
+toggle = () => this.setState(state => ({show: !state.show}))

also there are no types for Controller

[BowlingX]

Thank you for this release :). I tried the latest version and it seems like not all values are animated anymore. For Example the strokeDashoffset. If I try react-spring/renderprops it works. Is this intended?

<Spring
    from={{ strokeDashoffset: 157 }}
    to={{ strokeDashoffset: shouldAnimate ? 0 : 157 }} config={{ duration: 1000, easing: easeOut }}>
    { style => (
      <svg viewBox="0 0 60 60">
        ...
      </svg>
    )}
  </Spring>

[CosmaTrix]

Hi all,

I'm seeing a TypeScript error when using ref's (and use the ref's in a useChain hook).

const titleRef = useRef();

const titleAnimation = useSpring({
  from: {
    y: 100,
  },
  to: {
    y: 0,
  },
  ref: titleRef,
});

```
Type 'MutableRefObject' is not assignable to type 'MutableRefObject & RefObject'.
Type 'MutableRefObject' is not assignable to type 'RefObject'.
Types of property 'current' are incompatible.
Type 'undefined' is not assignable to type 'SpringHandle | null'.ts(2322)

The error makes sense, as `useRef` is actually returning `MutableRefObject<undefined>`, but `useSpring` is expecting something else.


**Edit:**
Fixed using
```typescript
useRef<SpringHandle>(null);

[aocenas]

Regarding change to:

Repurposed onStart prop
The onStart prop is now called whenever an animated key is about to start animating to a new value. Previously, it was called every time the props were updated (even when no animations were actually started), which proved to be unreliable.

Though onStart is not called, the onRest is still called even though no animation was started. https://codesandbox.io/s/dreamy-sea-3el3n

[aleclarson]

@aocenas Thanks for pointing that out! It's probably the incorrect behavior, but onRest currently means "all updates have completed without cancellation" instead of "all animations have come to a halt". I'll see how I can ensure the latter instead.

Do you think cancelled animations should trigger onRest? It gets tricky, because onRest is often used for chaining animations together, and cancelling one animation typically implies you want to cancel any dependent animations too (eg: the remaining animations in a chain).

[aleclarson]

@BowlingX I would recommend opening an issue for https://github.com/react-spring/react-spring/issues/642#issuecomment-492613412. Thanks! 👍

@madou Tracking the example bug here: https://github.com/react-spring/react-spring.io/issues/16

@ChrisW-B An example repo for https://github.com/react-spring/react-spring/issues/642#issuecomment-491309508 would be helpful. Thanks!

[ksaldana1]

I had been having some issues with VSCode performance recently and I spent some time looking into it tonight—for the particular project I'm working on it seems that the new TS typings are the cause for a good bulk of my Intellisense / tsserver slowdown. Here are some rough numbers from the VSCode process monitor. This is running the latest 3.5-rc build of TypeScript.

File at rest (with v9 typings active):

1 second after save/change (CPU spikes up to 280%):

File at rest (typings commented out):

It's hard for me to even get a picture of the jump without the typings, as it garbage collects pretty quick (spikes to ~400 MB/85%-100% CPU usage). Looking at the typings themselves, there's some pretty crazy stuff going on (hard API to type), so I'm not entirely surprised to find this. Something we probably want to keep an eye on though, as it's been a real drag on my TS dev experience lately... enough that I've disabled these typings for now.

This isn't an entirely unique problem as styled-components has recently had some issues.

[aocenas]

@aleclarson Well if the onRest should mean "all animations have come to a halt" than I think it should be called also on canceling (meaning someone called stop() right?) but maybe with boolean argument to mark whether the animation is finished (or in other words that the value of the animation equals the configured to value). Or if it is already possible to get that from current API it just needs to be in the docs. That way you could do

onRest: (canceled: boolean) => {
  if (!canceled) {
    // more animations
  }
}

@ksaldana1 Have the same issue both in VS code and WebStorm. Was much worse in 3.4 TS, in 3.5 it is much better but still ended up using my own simplified typings.

[rainstormza]

https://github.com/react-spring/react-spring/issues/325

@aleclarson
I try v9-beta with nextjs look like animation flashing again when I change route with animation.
It works fine on v8 and feels smoother.

v8 example
https://react-spring-325-aszmjdhnnv.now.sh

v9 example
https://react-spring-325-tkuptdounw.now.sh

codesandbox (code example but this behavior does not effect on codesandbox)
https://codesandbox.io/s/reactspring-325-vu8en

try to change route between about page and contacts page slowly, you will see flashing white background before they animate.

[aleclarson]

9.0.0-beta.9 is now available :tada:

https://github.com/react-spring/react-spring/compare/1e1c19d...2261d9b

Notable changes:

• Types should be ~100% working now (and hopefully not slow anymore)
• No longer relying on .d.ts modules for types
• Passing a functional component to animated is now supported
• Convert the frameloop from a singleton to the FrameLoop class
• Add the frameLoop global (for custom FrameLoop instance)
• Add the skipAnimation global (for making all animations instant)
• Export the isAnimated function (used to test for Animated nodes)
• Rewrite the Parallax component in TypeScript
• Event props passed to useTrail now receive a spring index
• Plenty of bug fixes for useTrail
• New target zdog available as react-spring/zdog or @react-spring/zdog
• We now use a monorepo!!
  
  
  
  • Targets are available as @react-spring/web etc
  
  
  • The react-spring package can still be used like before, but the react-spring/renderprops module no longer exists (use import { Spring } from 'react-spring' instead)
  
  
  • The react-spring/universal package is a mirror of @react-spring/core
  
  
  • Our fork of Animated (used internally) is available as @react-spring/animated
  
  
  • See the targets and packages directories for source code
  
  

[dagstuan]

Thanks for your hard work! However, 9.0.0-beta.9 did not fix the issue with slow typings. Importing animated still causes VS Code to run very slowly.

[aleclarson]

9.0.0-beta.10 is now available! 🎉

Notable changes:

• Hotfix for invalid tiny-invariant import
• Added @react-spring/envinfo for bug reports

[rainstormza]

@aleclarson

The react-spring package can still be used like before, but the react-spring/renderprops module no longer exists (use import { Spring } from 'react-spring' instead)

Look like import { Spring } from 'react-spring' does not work in 9.0.0-beta.10.

[wangzuo]

In 9.0.0-beta.10, the main entry point file (index.cjs.js) is missing.

[aleclarson]

I just released [email protected] with a hotfix for the incorrect main module.

In 9.0.0-beta.10, the main entry point file (index.cjs.js) is missing.

Note: That module should not be referenced directly, since it doesn't exist anymore.

[phaistonian]

@aleclarson It seems that latest is, again, pointing to beta :)

[dagstuan]

[email protected] has not specified a types-field in package.json, so the types are currently not working :)

[aleclarson]

It seems that latest is, again, pointing to beta :)

Ah, the lovely default behavior of npm publish 😅 That's what I get for rushing! Sorry :S

[email protected] has not specified a types-field in package.json, so the types are currently not working :)

Whoops. I didn't think that through enough. Fixed now in v9.0.0-beta.12!

[bmcmahen]

I've tried updating to the latest beta but get this strange error when using within Storybook. Maybe this makes more sense to you than it does me:

[aleclarson]

@bmcmahen Can you reproduce and give me a link? All packages come with sourcemaps. Not sure how your project is setup, but you should be able to use the sourcemaps for easier debugging. If not, we should fix that. Lastly, use yarn --force to be sure you're using the latest beta.

[marcuslindfeldt]

@aleclarson I get the same error as @bmcmahen on a standard gatsby site

[bmcmahen]

@aleclarson here's a branch with nothing changed except for the new version of react-spring: https://github.com/bmcmahen/react-gesture-view/tree/upgrade-react-spring

You can clone that branch, install using yarn, and run storybook using yarn run storybook.

BTW, this is using storybook 5 and typescript. I'm unsure of the lack of sourcemaps is related to react-spring or storybook -- wouldn't surprise me if it's just storybook, tbh, since I often get a lot of ugly errors thrown my way with it.

[aleclarson]

Note: For anyone using webpack with react-spring, add the following to your webpack.config.js for sourcemaps to be used.

devtool: 'source-map',
module: {
  rules: [{
    test: /\.js$/,
    loader: require.resolve('source-map-loader'),
    enforce: 'pre',
  }]
}

[aleclarson]

@bmcmahen @marcuslindfeldt It's a webpack bug. See here: https://github.com/webpack/webpack/issues/9253

[amadeus]

I'm attempting to upgrade to the 12 beta, but getting yarn errors:

[aleclarson]

9.0.0-beta.17 is now available! 🎉

Notable changes:

• All src files are published to npm
• Removed sourcesContent from sourcemaps
• The bundles aren't minified anymore (which avoids the webpack bug)
• Make react-spring/native friendlier to webpack and CRA
• Stop using fs-extra in react-native postinstall script

[marcuslindfeldt]

error [project-folder]/node_modules/@react-spring/shared: Command failed.
Exit code: 1
Command: node postinstall.js
Arguments: 
Directory: [project-folder]/node_modules/@react-spring/shared
Output:
fs.js:115
    throw err;
    ^

Error: ENOENT: no such file or directory, symlink '@react-spring/shared' -> 'node_modules/shared'
    at Object.symlinkSync (fs.js:902:3)
    at Object.<anonymous> ([project-folder]/node_modules/@react-spring/shared/postinstall.js:10:4)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

[aleclarson]

9.0.0-beta.19 should fix the postinstall errors. 👍

Use yarn --force --no-lockfile to be sure all transitive dependencies are updated.

Note: The react-spring/native bundle is currently incompatible with Metro. Looking into it...

[aleclarson]

v9.0.0-beta.20 is now available! 🎉

Notable changes

• No more postinstall scripts
• Compatible with Metro again

[amadeus]

I haven't dug into it yet - but beta8 works fine - however if I update to 20 I get this:

(We are using the Spring component in a few places, no actual hooks implementations atm)

[aleclarson]

@amadeus In my experience, that happens most easily because of multiple react packages with different versions being imported by the bundle. Can you confirm that's the case?

Also, how you're importing and using react-spring would be helpful. Feel free to edit your comment.

[amadeus]

Pretty sure we would have a ton of other issues if we imported multiple versions of react, but I will dig into Yarn and see if it's showing multiple copies.

Here is an example usage of how we use Spring:

https://gist.github.com/amadeus/62544af6d4f12e8f30afdb3dc3bd5a5a

[aleclarson]

I would check the sourcemapped node_modules in Chrome devtools too. Or maybe do a string search in the webpack bundle?

Also, how hard would it be to make a repro for this?

[amadeus]

Using yarn - it appears there's only 1 version of react and react-dom:

[amadeus]

Something interesting I am noticing - in node_modules there is a both a @react-spring folder and a react-spring folder. Is this intended? (there's only 1 item in package.json referring to react-spring

[aleclarson]

@amadeus Yeah it is. The react-spring package is now an umbrella for all platforms. It doesn't contain any of the actual implementation anymore.

[amadeus]

We figured it out - turned out due to our yarn workspaces configuration - it was importing 2 copies of the same version - due to some relative naming shenanigans.

[kodai3]

I tried beta.20 and have a question

I want to position my animated component only "from" or, like examples do.
how can I pass the position property to style which require PositionProperty type, when getValue() or interpolate() return string?

[aleclarson]

@kodai3 Please make an issue for your question, and please include a CodeSandbox of what you've tried.

[mikkno]

I have issues building with v 9.0.0-beta.20 and typescript version 3.3.3333
We get the following error

ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
8:88 '>' expected.
     6 | export declare const is: {
     7 |     arr: IsArray;
  >  8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
       |                                                                                        ^
     9 |     fun: (a: unknown) => a is Function;
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
8:91 ',' expected.
     6 | export declare const is: {
     7 |     arr: IsArray;
  >  8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
       |                                                                                           ^
     9 |     fun: (a: unknown) => a is Function;
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
8:93 ',' expected.
     6 | export declare const is: {
     7 |     arr: IsArray;
  >  8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
       |                                                                                             ^
     9 |     fun: (a: unknown) => a is Function;
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
8:94 Expression expected.
     6 | export declare const is: {
     7 |     arr: IsArray;
  >  8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
       |                                                                                              ^
     9 |     fun: (a: unknown) => a is Function;
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
9:28 ';' expected.
     7 |     arr: IsArray;
     8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
  >  9 |     fun: (a: unknown) => a is Function;
       |                            ^
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
    12 |     und: (a: unknown) => a is undefined;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
9:31 ';' expected.
     7 |     arr: IsArray;
     8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
  >  9 |     fun: (a: unknown) => a is Function;
       |                               ^
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
    12 |     und: (a: unknown) => a is undefined;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
10:28 ';' expected.
     8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
     9 |     fun: (a: unknown) => a is Function;
  > 10 |     str: (a: unknown) => a is string;
       |                            ^
    11 |     num: (a: unknown) => a is number;
    12 |     und: (a: unknown) => a is undefined;
    13 |     boo: (a: unknown) => a is boolean;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
10:31 ';' expected.
     8 |     obj: <T extends any>(a: T) => a is Exclude<T & Indexable<any>, Function | readonly any[]>;
     9 |     fun: (a: unknown) => a is Function;
  > 10 |     str: (a: unknown) => a is string;
       |                               ^
    11 |     num: (a: unknown) => a is number;
    12 |     und: (a: unknown) => a is undefined;
    13 |     boo: (a: unknown) => a is boolean;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
11:28 ';' expected.
     9 |     fun: (a: unknown) => a is Function;
    10 |     str: (a: unknown) => a is string;
  > 11 |     num: (a: unknown) => a is number;
       |                            ^
    12 |     und: (a: unknown) => a is undefined;
    13 |     boo: (a: unknown) => a is boolean;
    14 | };
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
11:31 ';' expected.
     9 |     fun: (a: unknown) => a is Function;
    10 |     str: (a: unknown) => a is string;
  > 11 |     num: (a: unknown) => a is number;
       |                               ^
    12 |     und: (a: unknown) => a is undefined;
    13 |     boo: (a: unknown) => a is boolean;
    14 | };
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
12:28 ';' expected.
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
  > 12 |     und: (a: unknown) => a is undefined;
       |                            ^
    13 |     boo: (a: unknown) => a is boolean;
    14 | };
    15 | export declare function useOnce(effect: React.EffectCallback): void;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
12:31 ';' expected.
    10 |     str: (a: unknown) => a is string;
    11 |     num: (a: unknown) => a is number;
  > 12 |     und: (a: unknown) => a is undefined;
       |                               ^
    13 |     boo: (a: unknown) => a is boolean;
    14 | };
    15 | export declare function useOnce(effect: React.EffectCallback): void;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
13:28 ';' expected.
    11 |     num: (a: unknown) => a is number;
    12 |     und: (a: unknown) => a is undefined;
  > 13 |     boo: (a: unknown) => a is boolean;
       |                            ^
    14 | };
    15 | export declare function useOnce(effect: React.EffectCallback): void;
    16 | export declare function useForceUpdate(): () => void;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
13:31 ';' expected.
    11 |     num: (a: unknown) => a is number;
    12 |     und: (a: unknown) => a is undefined;
  > 13 |     boo: (a: unknown) => a is boolean;
       |                               ^
    14 | };
    15 | export declare function useOnce(effect: React.EffectCallback): void;
    16 | export declare function useForceUpdate(): () => void;
× Project/node_modules/@react-spring/shared/helpers.d.ts
ERROR in Project/node_modules/@react-spring/shared/helpers.d.ts
14:1 Declaration or statement expected.
    12 |     und: (a: unknown) => a is undefined;
    13 |     boo: (a: unknown) => a is boolean;
  > 14 | };
       | ^
    15 | export declare function useOnce(effect: React.EffectCallback): void;
    16 | export declare function useForceUpdate(): () => void;
    17 | /** Use a value from the previous render */
× Compilation failed
[ERROR!] Task frontend:build failed with Compilation error
[ERROR!] build failed
[ERROR!] Compilation error

[aleclarson]

@mikkno The latest beta requires TypeScript 3.5+

[bmcmahen]

The latest beta (v20) is working well for me and the new typescript definitions are great! No issues with importing. Thanks for the hard work @aleclarson.

[aleclarson]

v9.0.0-beta.21 is now available! 🎉

https://github.com/react-spring/react-spring/compare/05f1122bc7ced02c14df6fc6952340c96437a99d...f7c18d667cc2c4df0fb85d337140099a0a3084c2

Notable changes

• Added animated.Image to @react-spring/native
• Be less strict about interpolate return type
• Fix passing function components to animated function
• Simplify ref forwarding in animated function
• Remove createAnimatedRef global

[ElForastero]

Is ref forwarding broken? 🤔

https://codesandbox.io/s/infallible-water-z6qtq

[aleclarson]

@ElForastero Only when ref is attached to child element of <Transition>. Working on a fix now. Thanks for reporting! ❤️

[aleclarson]

v9.0.0-beta.22 is now available! 🎉

https://github.com/react-spring/react-spring/compare/f7c18d6...fb03c2d

Notable changes

• Fixed ref prop with <Transition> children
• Fixed ref prop with useTransition
• Minor tweaks to typings

[flsilva]

@aleclarson just wanted to let you know that I was running v9.0.0-beta.8 and hitting the ref issue, upgraded to v9.0.0-beta.22 and it worked! Thanks for your work!

[louisgv]

beta.22 is giving me this error:

Type '{ [x: string]: SpringValue<any>; opacity: SpringValue<number>; pointerEvents: SpringValue<string>; }' is not assignable to type '{ alignContent?: string | SpringValue<string>; alignItems?: string | SpringValue<string>; alignSelf?: string | SpringValue<string>; animationDelay?: string | SpringValue<string>; ... 741 more ...; vectorEffect?: "-moz-initial" | ... 6 more ... | SpringValue<...>; }'.
  Types of property 'pointerEvents' are incompatible.
    Type 'SpringValue<string>' is not assignable to type '"all" | "fill" | "stroke" | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "auto" | "none" | "visible" | "painted" | "visibleFill" | "visiblePainted" | "visibleStroke" | SpringValue<...>'.
      Type 'SpringValue<string>' is not assignable to type 'SpringValue<PointerEventsProperty>'.
        Type 'string' is not assignable to type 'PointerEventsProperty'.  TS2322

    111 |   return (
    112 |     <ModalTriggerContainer>
  > 113 |       <Button style={buttonSpring} onClick={() => setIsOpen(true)}>
        |               ^
    114 |         {label}
    115 |       </Button>
    116 |       <ModalOverlay style={modalContainerSpring}>

However that used to work in beta.8.

[aleclarson]

@louisgv Please see #702

[louisgv]

I think the culprit is pointerEvents that I have this in the spring:

const openStyle = {
  opacity: 1,
  pointerEvents: 'all'
}

const closeStyle = {
  opacity: 0,
  pointerEvents: 'none'
}

[anthonysapp]

Is there an updated method for supporting IE11 with the new changes to the overall project structure? The webpack config from before:

alias: {
   'react-spring$': 'react-spring/web.cjs',
   'react-spring/renderprops$': 'react-spring/renderprops.cjs'
}

Don't seem to work for the newest beta versions.

[aleclarson]

@anthonysapp Thanks for reporting! 👍

The renderprops module no longer exists. Do this instead:

import { Spring } from 'react-spring'

The react-spring/web.cjs import should work, though.

[anthonysapp]

@aleclarson Yes, absolutely, the renderprops alias was redundant as I am using the hooks api :)
I am, however, getting an error in ie11. It's a syntax error - seems to be related to the the "Animated" class declaration in @react-spring/animated/index.cjs.js

[aleclarson]

v9.0.0-beta.23 is now available! 🎉

Notable changes

• Fix rollup config that accidentally skipped Babel
• Stop using tslib since @babel/runtime is all we need

[louisgv]

I got this error after upgrading to 22/23: https://pastebin.com/Xs0tmxey

[aleclarson]

@louisgv Can you open a new issue for that, along with a repro? Thanks 👍

[louisgv]

@aleclarson I can't quite reproduce the exact structure, but the current error I saw above is now omitted by the fix I included in the codesandbox. If I encounter this bug again, I will definitely try to spend more time on the reprod

[aleclarson]

v9.0.0-beta.24 is now available! 🎉

https://github.com/react-spring/react-spring/compare/0b8011c...144a6a5

Notable changes

• Added the onAnimate(props, controller) prop, which is called whenever the animations are about to be updated. This is useful for inspecting the props of each update after they've been merged into the controller.
• Fixed strange "onRest is not a function" bug reported by #703
• Fixed argument type of onStart prop
• Fixed buggy useForceUpdate (internal hook)

[taikn]

Latest betas (I've checked 22 & 24) doesn't seem to work in IE11

[aleclarson]

v9.0.0-beta.27 is now available! 🎉

https://github.com/react-spring/react-spring/compare/144a6a5...e40df28

Notable changes

• Fixed transform animations in @react-spring/native
• The onFrame event prop now receives the last frame again
• The onRest event prop is no longer called when no animations have actually started
• The useSprings function now has proper typings for its update function (by @barry4dev)
• The from prop of useTransition now properly receives an index when it's a function
• The animated function should work in "concurrent mode" now
• The animated function now caches its result on the original component if possible, and it prefers to return the cached result if the given component was ever passed in earlier
• Added the getComponentProps global for modifying the props of animated components
• Made isAnimated checks faster by looking for a symbol instead of using instanceof

[taikn]

I've tried latest beta and still seeing syntax error, please check the screen below:

Maybe it has something to do with declaring variable with let, which is not recognized by IE11?

[phaistonian]

@taikn Try adding.

'react-spring$': 'react-spring/web.cjs',

To your resolve.alias array in your webpack config.

The default module points to the ES6 version, not the commonjs one.

[taikn]

thx @phaistonian, but I've already got this alias in my webpack config and it still doesn't work in IE11 ( react-spring@beta 27), though it was working with react-spring@beta 8.

[aleclarson]

@phaistonian That shouldn't be necessary. The main field points to the .cjs.js bundle.

@taikn I double-checked the files published to npm, and I'm not seeing any let statements in the .cjs.js bundles.

[taikn]

@aleclarson Indeed the .cjs.js files are suitable for IE11. The problem might be that though main field inside package.json points to web.cjs.js - the web.cjs.js itself is pointing to:

...
var web = require('@react-spring/web');
...

which is picking up index.js written in ES6 and not the index.cjs.js

[aleclarson]

@taikn Hmm, is there some way to confirm that? The main field of @react-spring/web also points to a .cjs.js module.

[taikn]

It does, but the imports in @react-spring/web .cjs.js seem to point to index.js of the corresponding modules:

...
var core = require('@react-spring/core');
var stringInterpolation = require('@react-spring/shared/stringInterpolation');
var colorNames = _interopDefault(require('@react-spring/shared/colors'));
var animated$1 = require('@react-spring/animated');
...

[aleclarson]

Ahh there it is. Those @react-spring/shared/* imports are the culprit! We'll need to fix the Rollup config then.

[aleclarson]

v9.0.0-beta.28 is now available! 🎉

https://github.com/react-spring/react-spring/compare/e40df28...ad6184b

Notable changes

• Fixed invalid import in Parallax addon
• Fixed invalid imports in CommonJS builds
• Fixed crash when to prop is defined but not an object
• Fixed infinite await in async to prop when an update call doesn't start any animations

[nhardy]

It looks like 274afadb11ec8d3612c0c575a1e69d769876ffa9 introduced an issue. @react-spring/shared does not currently have a rollup config that would output .cjs.js files, yet these are now being referenced as a result of that change.

[natew]

A new bug somewhere after beta 24 and before 27. It seems usePrev logic is wrong and causing useSprings to not pick up the initial springs you set, and also never update.

I have something like this:

const [springs, set] = useSprings(3, i => ({
    xyz: [i * 30, 0, -i * 50],
    config: { mass: 1 + i * 2, tension: 700 - i * 100, friction: 30 + i * 20 },
  }))

And if I set the debugger inside useSprings I'm seeing hasNewSprings === false on initial render, which means state.springs never is set to anything. Then when I try and run set later on (from console) the update function just sees an 0 length array and doesn't do anything.

Edit: on further look, perhaps the usePrev is right, but the general logic just doesn't seem to work. The only place I see state.springs being set is here but hasNewSprings will always be false on first mount.

[aleclarson]

@nhardy That's a good point. I forgot that @react-spring/shared doesn't even use Rollup, so I misdiagnosed the problem. We already target ES5 in packages/shared/tsconfig.json, so now I'm wondering where this IE11 incompatibility that @taikn reported is coming from.

@natew Do you have a small repro that confirms that?

[taikn]

@aleclarson @react-spring/web/index.cjs.js has following imports besides shared modules(which are in ES5 anyways):

var animated$1 = require('@react-spring/animated');
var core = require('@react-spring/core');

I am wondering, if it should explicitly point to .cjs.js files like this:

var animated$1 = require('@react-spring/animated/index.cjs');
var core = require('@react-spring/core/index.cjs');

to pick the right cjs modules? Otherwise its picking the default ES6 modules? Or my assumption is wrong and imports in cjs.js files automatically pick the .cjs files?

[aleclarson]

@taikn You should check the main field in each node_modules/@react-spring/*/package.json file. I'm pretty sure they all point to .cjs.js modules. I think we're gonna need a repro before we can fix this.

[taikn]

@aleclarson true, problem seems to be with webpack - it is prioritising module over main:
https://github.com/webpack/webpack/issues/5756
one workaround could be to add browser to package.json pointing to cjs.js which has priority over module

[aleclarson]

@taikn You can tell webpack to ignore the module field (see here). Also, you could just have webpack compile the ESM bundles to ES5 with Babel.

[taikn]

@aleclarson Thanks for your suggestions, however modifying resolve.mainFields affects all installed packages and might lead to unpredictable results and adding exception to transpile react-spring with babel-loader seems cumbersome...

[aleclarson]

@taikn If you're targeting IE11, you should be compiling your whole bundle to ES5 with webpack, no? Which means you probably should ignore the module field of all packages.

[taikn]

@aleclarson Not really, its transpiling the app files, but not the packages inside node_modules, which are excluded from babel, by default webpack just loads them as they are.

[aleclarson]

@taikn Ah I see. It's very confusing that webpack expects(?) the module field to contain ES5 code when import/export syntax was introduced in ES6.

[aleclarson]

Okay, I found proof that we're indeed doing it wrong. The module field should preserve import/export like we're already doing, but everything else should be transpiled to ES5.

edit: More proof: https://babeljs.io/blog/2018/06/26/on-consuming-and-publishing-es2015+-packages#conflating-javascript-modules-and-es2015

[aleclarson]

v9.0.0-beta.30 is now available! 🎉

https://github.com/react-spring/react-spring/compare/d9aef95...4803f24

Notable changes

• ESM bundles are now transpiled to ES5 as they should be
• Deprecated the value.interpolate() method in favor of value.to()
• Deprecated the interpolate() function in favor of to()

[drcmda]

@aleclarson he problem is that this adds a ton of code and also causes perf problems. even babel recommends to not transpile es5 these days: https://babeljs.io/docs/en/babel-preset-env#options (> 0.25%, not dead), this is also reacts (create-react-app) default. but that will still include IE, so most patches will ship, hence the usual recommendation: ">0.25%, not ie 11, not op_mini all". see: https://jamie.build/last-2-versions

james kyle had his twitter account blocked, he made a side by side comparison of the actual cost, and it was mindblowing. there is so much dirt and cruft that comes along with babel and corejs, sometimes with insane speed regression. for a simple class statement you got pages of minified js code.

what i'd like most is to concentrate on evergreen and ratified specs, i think esm could well assume these days that => exists, classes, etc. Cjs on the other hand could be fully transpiled into es5 with ie support.

[aleclarson]

@drcmda I made a tweet recently asking for input about having a source field in package.json for users that want to target modern browsers. No one replied, but I think it's probably the best way forward. As I mentioned above, the module field must contain ES5 syntax (see here). Having ES6+ syntax in the ESM bundle breaks webpack, so it's a non-starter.

[QuietNoise]

I might be doing something wrong but I can't get render props to work in 9 beta3.0.
For example basic Trail from manual won't bugde. Here is sample code:
https://codesandbox.io/s/renderprops-gzie7

Steps to reproduce.
If you reload it on 9beta30 the trail items don't animate at all.

If you change dependency to official release (and make sure to import Trail from renderpros now), all animations start to work.

What am I missing?

[drcmda]

@aleclarson have you measured how large the bundle impact is, what does size-snapshot say? or some light perf checkup to see if the perf regressions are drastic. if it's not that much i think it's fine to go es5, though something in me feels weird having to support javascript from half a decade ago with regressions, knowing that so many authors do push es2015 (like sindre). but if perf for instance goes down 50% or something evil like that, then i think we should break webpack. ☠️i've used spring in webpack 3-4, rollup, ts, parcel and csb - never had a problem. but if it's all insignificant then yeah, doesn't matter to me in that much.

[aleclarson]

@drcmda Not sure about performance, but the bundle impact is <3.8kb minified (note: that measurement includes the recent deprecation of interpolate). Parcel recognizes the "source" field in package.json OOTB (according to this tweet), and it's not hard to add "source" to webpack's list of mainFields. It's probably better if we go that route.

edit: @drcmda convinced me in Twitter DMs to do it his way. But I'll find another way to keep the cjs bundles working with IE11.

[amadeus]

I think beta 30 totally breaks what I was doing with interpolate. Any reason to deprecate it? I have a few cases where I share the same value across a few different components/props to sync the animations, so a lot of lines like:

class Example extends React.Component {
  getBadgePositionInterpolation(controller: any, yMultiplier?: number = 1) {
    return controller.animated.spring
      .interpolate([0, 1], [20, 0])
      .interpolate(value => `translate(${value} ${value * yMultiplier})`);
  }

  getLowerBadgeStyles() {
    const {spring} = this.state.lowerBadgeMask.animated;
    return {
      opacity: spring.interpolate([0, 0.5, 1], [0, 0, 1]),
      transform: spring.interpolate(value => `translate(${16 - value * 16}px, ${16 - value * 16}px)`),
    };
  }

  getUpperBadgeStyles() {
    const {spring} = this.state.upperBadgeMask.animated;
    return {
      opacity: spring.interpolate([0, 0.5, 1], [0, 0, 1]),
      transform: spring.interpolate(value => `translate(${16 - value * 16}px, ${-1 * (16 - value * 16)}px)`),
    };
  }
}

[aleclarson]

@amadeus It hasn't been removed, just renamed to .to(...)

[amadeus]

Very strange, i did try renaming everything to .to, but it seemed to be broken. I'll dig a bit more and see if I can figure out what is going on (it's like some values seem to get update but others never animated)

[aleclarson]

@amadeus Sorry, I need to publish a new beta that includes the typings for the new name. I'll do that either before I go to sleep or early tomorrow morning.

Though, it shouldn't have caused any bugs on your end.

[amadeus]

So I am 99% sure this is a React Spring bug (I was on beta 20 before going to beta 30, so this could've been introduced anytime before then, can try bisecting betas more to see if I can find which version).

Anyways, for some context - I am doing some animations using a combination of SVG masks and dom elements.

I am animating an svg mask on the same spring value as a dom element's transform, to create this effect in beta20 and prior:

good example

And after updating to beta30, you can see what is now happening:

bug example

It appears the SVG is animating fine on the value (as can be seen by the mask) however the dom element just get's the from values applied and never animates.

[aleclarson]

v9.0.0-beta.31 is now available! 🎉

https://github.com/react-spring/react-spring/compare/4803f24...416315b

Notable changes

• ESM bundles have ES6+ syntax again
• CJS bundles now point to explicit CJS dependencies
• ts: The SpringsUpdateFn type is now exported
• ts: The SpringValue interface now has the to method

[raunofreiberg]

Upgrading to v9.0.0-beta.31 in a TS project gives me the following errors:

[aleclarson]

@raunofreiberg Try upgrading to typescript 3.5+

Though, the cacheKey error looks legitimate.

[raunofreiberg]

FWIW, the error related to @react-spring/core went away with the upgrade.

[aleclarson]

@raunofreiberg Yep, that's because Omit is a built-in type in TS 3.5+ (see here)

I just fixed the other type error with https://github.com/react-spring/react-spring/commit/a43393ddc0b01d46a8a0c413a07bdec237d3cc25

[mbaranovski]

I have a weird issue. I've created a modal with below springs and I am using useChain hook to control them. Locally the animations work but once I build the React project (created from CRA) npm run build and host it either locally or somewhere in the cloud then only one animation is being triggered (I can see that based on the styles in code inspector).

Config:

const aProps = useSpring({
    ref: modalContentRef,
    config: { mass: 2, tension: 364, friction: 31 },
    from: { transform: "translate(-50%,-50%) scale(0)", opacity: 0 },
    to: {
      transform: isOpen
        ? "translate(-50%,-50%) scale(1)"
        : "translate(-50%,-50%) scale(0)",
      opacity: isOpen ? 1 : 0
    }
  });
  const bgOpacity = useSpring({
    ref: opacityRef,
    from: {
      opacity: 0
    },
    to: [
      {
        opacity: isOpen ? 0.32 : 0
      }
    ]
  });
  const bgScale = useSpring({
    ref: scaleRef,
    from: {
      transform: "scale(0)"
    },
    to: {
      transform: isOpen ? "scale(1)" : "scale(0)"
    },
    config: {
      duration: 1
    }
  });

Chain:

useChain(
    isOpen
      ? [scaleRef, opacityRef, modalContentRef]
      : [modalContentRef, opacityRef, scaleRef],
    isOpen ? [0, 0, 0.3] : [0, 0.3, 0.7]
  );

EDIT:
I've just downgraded to the latest version 8.0.27 and everything is working as expected with the same config.

[RafalFilipek]

Hi,

I have combo issue NextJS + react-spring. It's strictly connected with NextJS, so I've posted it here https://github.com/zeit/next.js/issues/8222

Summary: for some reason react-spring causing memory leak in NodeJS by allocating new Controller class for each request.

Thank you

[guopengliang]

Please consider feature requests #785 and #783 to be added to v9.
Thank you.

[aleclarson]

v9.0.0-beta.33 is now available! 🎉

https://github.com/react-spring/react-spring/compare/416315b...96f1bad

Notable changes

• feat: In react-spring/web, animated components now accept shortcuts for style.transform such as style.x, style.scale, etc (more info: #782)
• feat: export isAnimated function (https://github.com/react-spring/react-spring/commit/8c08a561892f2e8dbc8de83f0e7d4db145a42647)
• fix: avoid calling onRest if no animations were created/updated (https://github.com/react-spring/react-spring/commit/301de6d85344229d8840f06cf6b5163d06ff18fd)
• fix: avoid forcing a re-render in animated component when not yet mounted (https://github.com/react-spring/react-spring/commit/ef73bac137cd9659211f0caf2fe8d894b3bbbc24)
• fix: make usePrev internal helper work in React's concurrent mode (https://github.com/react-spring/react-spring/commit/a238b7fd5c40c32126ed6b4e1a743136539b8444)
• fix: add missing dependency to @react-spring/animated (https://github.com/react-spring/react-spring/commit/d6a45662c9a55f6a8fe7af4c1fec4a76afe6b563)
• types: minor fixes to TypeScript types (https://github.com/react-spring/react-spring/commit/a43393ddc0b01d46a8a0c413a07bdec237d3cc25, https://github.com/react-spring/react-spring/commit/ab68cca0c4e27e6c66cfd0f944152f9194763c2f, https://github.com/react-spring/react-spring/commit/a9f39eb7ca4c1c9806507cc33cfc3ee554c39384, https://github.com/react-spring/react-spring/commit/48cb3e2406e186778744eea5ac718e9c7592f50d)

[dagstuan]

I dont know when this broke, but useTransition with a function for enter seems to be broken when using strings... example here: https://codesandbox.io/s/hardcore-wiles-lw5u5

[panjiesw]

I don't know if it's just me but using v9.0.0-beta.33 spikes CPU high, both in VSCode and in CRA. This slows file saving, leaving any errors/warning not be cleared until a while. react-scripts start also spend a lot of times doing type check after each file save.

VSCode

Version: 1.37.1
Commit: f06011ac164ae4dc8e753a3fe7f9549844d15e35
Date: 2019-08-15T16:17:25.463Z
Electron: 4.2.7
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Linux x64 4.19.66-1-MANJARO

NodeJS: v10.16.0
TypeScript: v3.5.3

[IngoValente]

Looks like the newly released typescript 3.6.2 has some difficulties with react-spring types, I keep getting Type instantiation is excessively deep and possibly infinite. TS2589 when using 'animated' from react-spring 9.0.0-beta.33.

Downgrading project to typescript 3.5.3 works fine.
Node v12.9.0

[barrymay]

@aleclarson This may or may not help - I did quite a bit of digging into the TS 3.6 upgrade issue. The problem appears to be due to the introduction of an instantiation count.

https://github.com/microsoft/TypeScript/pull/32079/commits/49e3f1788641fe3709644f5644048a00a3fea43b
and its related issue.
https://github.com/microsoft/TypeScript/pull/32079

Seems to be at least partially related to the recursive nature of the AnimatedProps/AnimatedStyles/etc. definitions. (Wish they gave a better way to debug Conditional Types...)

[dagstuan]

@panjiesw @IngoValente @barrymay this issue is probably the same as #613.

[barrymay]

@cdebotton yeah i saw that thread, likely similar I agree in terms of root cause. I also tried applying the short-term fix @aleclarson made but to no avail. This new issue just brings to the fore all around because it prevents TS upgrade.

I've been struggling to understand the use case where the react-spring types need to be recursive as they are. I wonder if they could be simplified so that the types help with high-level animated attributes w/ SpringValue but then let's the dev do what they want beyond that. It should surely help tsserver as well imo.

It seems that ts's type system tries to flush out all alternatives and that's where this goes wonky.

[louisgv]

I'm experiencing this problem after upgrade to 33. This happens only on prod. It worked perfectly with previous version.

The weird thing is I can't reproduce on my dev env but this occurs after 1-2 page refresh on staging deployment.

[aleclarson]

#808 and #809 could use some feedback before they're merged into v9

[barrymay]

@aleclarson I'm taking a look at both of the above, but I'm curious on your feedback on the aforementioned TS 3.6 issues. I saw you made some updates, and I've tried pulling/building/linking the latest v9 branch against my own project, but I'm still getting the same "Type instantiation is excessively deep and possibly infinite" that @IngoValente mentioned. Thx

[aleclarson]

I've been working on the types all night. Should have #808 updated soon.

[danieloi]

for useSpring, onRest is fired every time the component unmounts.

Anyone have a workaround for this?

I think it relates to #623

Thanks in advance 🙏🏾

[aleclarson]

@danieloi Thanks for the heads up! This will be fixed in #808

[rickyhopkins]

I am getting the following ts error when importing from cjs:

import { useTransition } from "react-spring/web.cjs";

Could not find a declaration file for module 'react-spring/web.cjs'. 'C:/Git/ComponentLibrary/node_modules/react-spring/web.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/react-spring` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-spring/web.cjs';`

using "react-spring": "^9.0.0-beta.34"

This works fine when I roll back to 8.0.27

[kigorw]

useTransition does unecessary mounts/unmounts
Mount - Unmount - Mount - on show, and on hide Unmount - Mount - Unmount
see https://codesandbox.io/s/react-spring-mountunmount-sbqns

[jack-guy]

@kigorw I think this might be because your useEffect is running on component update. Working as expected for me if I pass an empty array [] to useEffect as a second argument.

[RafalFilipek]

@aleclarson any ETA for next beta?

[aleclarson]

@RafalFilipek The next beta will be whenever #808 and #809 get merged (no ETA on that).

[aleclarson]

I just released a canary for #808 and #809:

npm install [email protected]

Feel free to try it out and give feedback here.

[DeyLak]

I've just experienced an issue with useTransition typings. I noticed that somehow useTransition.tsx file from this PR got into the release. I got this error, when using the hook:

Argument of type '{ from: { readonly transform: string; readonly position: "absolute"; }; enter: { readonly transform: "translate3d(0, 0, 0)"; readonly position: "static"; }; leave: { readonly transform: string; readonly position: "absolute"; }; }' is not assignable to parameter of type 'any[]'.
  Object literal may only specify known properties, and 'from' does not exist in type 'any[]'.

43     from: { transform: `translate3d(${getMinusSign()}100vw, 0, 0)`, position: 'absolute' } as const,
       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I have react-spring@^9.0.0-beta.34 installed. But i got this in my yarn.lock:

react-spring@^9.0.0-beta.34:
  version "9.0.0-canary.809.1.aa2db98.0"
  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.0.0-canary.809.1.aa2db98.0.tgz#8ee6a3e2569233521b165c19f19d349965561f04"
  integrity sha512-3kefvB4rktxKBAM+JO3ymqbyDKDSC6o2qDeOjXHTURgm2gr42gopQjIz4aQ5xTIRFtUHaKNk6pnTfIsOkHj+PA==
  dependencies:
    "@babel/runtime" "^7.3.1"
    "@react-spring/addons" "^9.0.0-canary.809.1.aa2db98.0"
    "@react-spring/core" "^9.0.0-canary.809.1.aa2db98.0"
    "@react-spring/konva" "^9.0.0-canary.809.1.aa2db98.0"
    "@react-spring/native" "^9.0.0-canary.809.1.aa2db98.0"
    "@react-spring/three" "^9.0.0-canary.809.1.aa2db98.0"
    "@react-spring/web" "^9.0.0-canary.809.1.aa2db98.0"
    "@react-spring/zdog" "^9.0.0-canary.809.1.aa2db98.0"

[aleclarson]

@DeyLak You can't use caret ranges with v9 beta anymore, because a canary version exists, and SemVer thinks you want that. 😢

[DeyLak]

@aleclarson Thanks, I didn't think about it. Managed to fix version by removing caret.
BTW, I'm using useTransition with react-router, and it seems to be broken with the new API.
I reproduced it with this demo from docs:
https://codesandbox.io/s/admiring-lewin-07wzr?fontsize=14

[aleclarson]

@DeyLak Fixed in 9.0.0-canary.809.2.49361198

Example (will delete later)

Code

I also made sure you can click fast repeatedly without any visual glitches.

From 4511182c54954759932977b6f72ce7f9ec05863d Mon Sep 17 00:00:00 2001
From: Alec Larson <[email protected]>
Date: Sun, 29 Sep 2019 19:50:44 -0400
Subject: [PATCH] fix: visual glitches in "simple-transition" demo

---
 src/index.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/index.js b/src/index.js
index 7c5bd64b..c44d2f71 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,5 @@
 import { render } from 'react-dom'
-import React, { useState, useCallback } from 'react'
+import React, { useState } from 'react'
 import { useTransition, animated } from 'react-spring'
 import './styles.css'

@@ -19,16 +19,15 @@ const pages = [

 export default function App() {
   const [index, set] = useState(0)
-  const onClick = useCallback(() => set(state => (state + 1) % 3), [])
   const transition = useTransition(index, {
     from: { opacity: 0, transform: 'translate3d(100%,0,0)' },
     enter: { opacity: 1, transform: 'translate3d(0%,0,0)' },
     leave: { opacity: 0, transform: 'translate3d(-50%,0,0)' },
   })
   return (
-    <div className="simple-trans-main" onClick={onClick}>
+    <div className="simple-trans-main" onClick={() => set(index => index + 1)}>
       {transition((props, item) => {
-        const Page = pages[item]
+        const Page = pages[item % 3]
         return <Page style={props} />
       })}
     </div>
-- 
2.19.2

[aleclarson]

https://github.com/react-spring/react-spring/issues/642#issuecomment-527160526

@louisgv Let me know if 9.0.0-canary.809.2.49361198 fixes your issue, and please provide a sandbox if it doesn't. 👍

[aleclarson]

https://github.com/react-spring/react-spring/issues/642#issuecomment-522923705

@dagstuan Fixed in 9.0.0-canary.809.2.49361198

[barrymay]

@aleclarson I tried the new canary build, changed my code to fit, and I'm getting the following error every time when navigating to the page where the spring is:

(I noticed by looking at the code that this regeneratorRuntime ref is only in the build when using the new branch (use-transition-rework) and not v9 or master).

If there's no obvious issue you can see I'll try to add a sandbox if needed

ReferenceError: regeneratorRuntime is not defined
    at <srcdir>/node_modules/@react-spring/core/index.cjs.js:635:5
    at <srcdir>/node_modules/@react-spring/core/index.cjs.js:687:4
    at Object.<anonymous> (<srcdir>/node_modules/@react-spring/core/index.cjs.js:1203:2)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (<srcdir>/node_modules/@react-spring/web/index.cjs.js:8:12)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)

[aleclarson]

@barrymay Fixed in 9.0.0-canary.809.3.a66b280 👍

[barrymay]

Works! 🎉

[matthewlilley]

I've just tried 9+ versions up to 820 with this Sandbox but I'm getting tab crashes after a few seconds each time. The same with the React Spring website, it crashes the browser regularly. (Windows 10, Chrome). My machine sounds like an airplane is about to take off when it happens 😂

https://codesandbox.io/s/intelligent-nightingale-4zv2w

[aleclarson]

@matthewlilley That sounds serious! Could you open an issue with a basic repro so it can be looked at by someone with a Windows machine? 👍

I've just tried 9+ versions up to 820

What does this mean? You tried v8.20.0 and below?

Try this too, please: npm install react-spring@next

[tm1000]

I tired the code sandbox above on Windows 10, Chrome and did not have any issues, no crashes no fan spinups. CPU was about 15-20%

[matthewlilley]

@aleclarson Sorry I wasn't clear, I'd meant version 9 up to canary ending 820. I didn't see these issues in 8 with the same examples. If you take the "SPRING RESET SCRIPT" from the React Spring examples pages, and switch that over to any 9+ version it's repeatable, at least on my system.

The code sandbox itself is protecting itself somewhat by throwing "RangeError: Potential infinite loop: exceeded 10001 iterations. You can disable this check by creating a sandbox.config.json file." which is killing the animation after around 5 seconds. Sandbox used is below.

https://codesandbox.io/s/staging-sunset-i2wcl

In the real world, the usage builds and builds to the point where Chrome tabs become inaccessible, this periodically happens to me on the React Spring website, I'd imagine for similar reasons.

I'll do my best to investigate further and put a regular repro Together, hopefully this'll give you something to go off for now.

@tm1000 Maybe it's more noticeable when something odd is happening since I have 12 x 120mm fans on this machine which I don't regularly hear RPM changes from at all, the codesandbox seems to be protecting against the high resource usage somewhat.

[barrymay]

Confirmed that the canary build works fine with TypeScript 3.6.3 - great job @aleclarson! Would love to hear sometime how you sorted that, if there was any reduction in strictness, etc.

[DeyLak]

I found a regression in using transition to zero value.
Here is the example of using react-router for old version(8.0.3)
Here is the same example but with latest canary build

If you try to click on links, you'll see that leaving animation is not taking place for previous route. It took me some time to understand, that the issue is that I have enter config like this: enter: { transform: 'translate3d(0,0,0)' }. If I change it to enter: { transform: 'translate3d(0%,0,0)' }, everything works fine (pay attention to percent sign before zero).
As far as I know, not using unit in zero values considered good practice, also this behaviour could be very confusing, so may be it should be fixed or at least have a note in the docs?

[aleclarson]

@DeyLak Thanks for the bug report! The v8 example still breaks if you want to use different units (eg: animating from 100% to 20px), but that's easier (and less common) for users to debug than a missing %. I think v8 just uses the from value as a template, which is why 0 alone works there. If you try swapping the from and enter objects, you'll see v8 break just like v9 does.

[ElForastero]

I don't know if it was mentioned earlier or not but the "notifications" example is broken on v9.

https://codesandbox.io/s/messagehub-t7pbx

[aleclarson]

@ElForastero You can find the updated demos here: https://github.com/react-spring/react-spring-examples/tree/v9

[aleclarson]

The latest canary is out: [email protected]

Let me know if anything broke. ;)

[barrymay]

Love the canary builds, but is 808.1 greater than 809.5 (the last one?)

More importantly - 808.1 seems to break things, unless it's a weird codesandbox problem:
https://codesandbox.io/s/dawn-dust-t1l6l

(note that 809.5 is fine)

[aleclarson]

Ah whoops, I forgot to try it on CodeSandbox. 😅 The 808 is the PR number. I stopped using 809 because it's now merged into #808. The .1 is the canary version number specific to the PR.

Anyway, after 2 more broken canaries, I've got a working canary again.

npm install [email protected]

[martinbroos]

I'm getting a Typescript error on fluids dependency of React-spring in the latest canary build. No problems in 809.

└─┬ [email protected]
└─┬ @react-spring/[email protected]
└─┬ @react-spring/[email protected]
└── [email protected]

node_modules/fluids/src/index.ts:42:10 - error TS7030: Not all code paths return a value. 42 function addFluidObserver(target: object, observer: FluidObserver) {

[aleclarson]

@martinbroos Please provide a git repo that reproduces the issue. Thanks 👍

[devwells]

I am getting an error for useTransition on canary version [email protected]

Cannot read property 'ref' of null

here is a codesandbox with the issue: https://codesandbox.io/s/hardcore-field-y07un

[aleclarson]

@devwells Stick to 9.0.0-beta.34 if you don't want to change your useTransition calls. The useTransition hook only takes 2 arguments now. What was once the 2nd argument is now the key or keys prop. If you have any questions, please ask in #808. 👍

For more info on the useTransition changes, check out #809. 🌶

[devwells]

awesome, thanks so much for the quick reply!

[VictorQueiroz]

Hi, very nice library. I'm quite anxious to see what's coming next.

I noticed a breaking change on Spring component. Now you can't use custom properties on from and to attributes which was kind of a nice feature. I'm supposing you guys moved it to some other component? If so, I'd like to know why so I can ditch old version from my code.

I'm currently using @react-spring/web package available on NPM and I'm having a hard time on finding documentation for it. So, where's it? :)

Thank you for making it possible to create such amazing and blazing smooth animations.

[aleclarson]

I noticed a breaking change on Spring component. Now you can't use custom properties on from and to attributes which was kind of a nice feature

The Spring component should work as expected. No major changes to the from or to props. You were probably confused by SpringValue in #808, right? Anyway, official documentation hasn't been written yet, but some of the changes are detailed here, as well as #808 and #809.

[subhero24]

When using the v9 beta 34 I get the following warning

interpolate() will be deprecated in v10, use .to()".

I am doing this

interpolate([width, center], (w, c) => `calc(${c} - ${w} / 2)`);

How should I use .to() instead of interpolate() when interpolating on multiple values?

[aleclarson]

@subhero24 Did you try import { to } from 'react-spring' 😉

[subhero24]

Oh I see. I thought the warning meant to use value.to(). My mistake. Thanks for the quick reply!

[MickaelNeves]

I'm using v9.0.0-beta.34 and using useTransition with React-Router for some animated page transitions, but it gives me an error:

transitions.map is not a function

it seems like useTransition no longer returns an array, or maybe something wrong with react router?

link to sandbox

it used to work on v8.0.3

Thanks in advance and wonderful job by the way, amazing lib :)

[dagstuan]

@MickaelNeves installing react-spring@^9.0.0-beta.34 actually ends up installing the newest canary. Pinning the version to [email protected] fixes your demo :)

[MickaelNeves]

@dagstuan thanks! didn't notice that :P

[elie222]

Having issues with animated on React Native.

For example:

  const AnimatedView = animated(View)

  return (
    <AnimatedView
      style={{
        height: 100,
        width: 100,
        backgroundColor: 'red',
        transform: [{ translateX: 100 }, { translateY: 200 }, { rotateZ: '45deg' }],
      }}
    >
      <Text>TEST</Text>
    </AnimatedView>
  )

This works fine in v8. Doesn't work in v9. It breaks because the transform array is converted to a string that looks something like this: [[Object object], [Object object], [Object object]].

[ShanonJackson]

Brutal feedback, but why is 9.0.0 taking longer than 8 months to deliver when it's entire feature set (becides bug fixes) can already be achieved in the 8.0.0 version of react-spring trivially.

(Note this is based off MY personal understanding of the 9.0.0 feature set and i haven't actually dove under the hood this may be off)

"stop": Same as just having a variable in state called "stop" which removes the styles from the styles object, if you need the state of the last frame to be preserved use onFrame updating useRef then stop in state can apply the last styles.

"delay": Same as just awaiting a async function that resolve on delay.

enter: async (next, cancel) => {
     await new Promise((res) => setTimeout(() => resolve(true), 500))
     await next({opacity: 1})
}

"time based diffing"

useTransition(items, null, {
  from: { size: 0, color: 'green' },
  enter: { size: 100, color: 'black' },
  leave: { size: 0 }, // Once the "leave" animation begins, the "color" will continue
})                    // animating from "green" to "black" since it never changed.

just not the same as...

useTransition(items, null, {
  from: { size: 0, color: 'green' },
  enter: { size: 100, color: 'black' },
  leave: { size: 0, color: 'black' }, 
})                 

? Like am i missing the point i don't understand why we need this let alone why it takes 8months like i understand this project is a labor of love, open source, yadda yadda but realistically this project is stagnating where-as projects like framer motion which has some insanely useful built in primitives including layout transitions without math position values (https://codesandbox.io/s/framer-motion-drag-to-reorder-pkm1k) (using useLayoutEffect) are starting to catch up.

But framer motion comes with more bundle size + terrible physics. React-spring is still my favorite library our team uses it on 7+ projects, our main product and our private npm package component library however my teammates ask me more and more if we can migrate off react-spring. This is not a dig at the maintainers as i'm literally a react-spring #1 fan but i feel like this project has gone extremely south to the point where its lifespan realistically hasn't got long left when other libraries are starting to catch up and in some areas exceed.

[aleclarson]

Hi @ShanonJackson,

If you want to write up some feature proposals or just open an issue for each of your complaints about the library, feel free. Anyway, I wouldn't blame you for preferring an OSS library with actual funding, but I'm sticking with react-spring because I love the API and cross-platform support.

There's no reason to think it's stagnating. I release a new canary whenever I find a bug that is preventing my own projects from moving forward. Apart from that, I'm only being paid $23 a month for my volunteer work on this, and I have no income currently (full-time on my startup).

@drcmda has been working on other things, so he hasn't contributed much lately. And I made no promises that v9 would be done before 2020.

Let me know if you have any other concerns. ✌️

[ShanonJackson]

I know, this isn't an attack on the library i understand people volunteering their time to maintain it is a godsend for me, our teams and our projects because without them we'd be in a forced migration situation rather than an optional migration situation.

I know @drcmda has been working on react-three-fiber which has done some super impressive stuff but it has come at a cost to the progression of react-spring.

I will also be sticking with react-spring for now but i do feel like there's alot to be learnt from framer motion who i feel outside of their terrible physics is doing some crazy work in the inbuilt-primitive space (as in they have inbuilt things to handle touch, gestures, drag and drop, layout, etc).

Appreciate the work on 9.0.0, the reply and the time volunteering.
Thanks

[dbismut]

@ShanonJackson I’m pretty sure you’re aware of react-use-gesture which also allows out of the box support for drag, pinch, etc. I agree the react-spring ecosystem might be missing FLIP but I’m curious if you have any other feature requests we can help building?

[warsawgentleman]

Hello,
first of all I would like to thank you for awesome job, that you are doing - react spring is really great.

I think I found a bug in 9.0.0-beta.34 version: I'm doing async animations in useTransition hook in leave phase. Here is codesandbox: https://codesandbox.io/s/sad-https-l7lxe and here is leave handler:

leave: () => async next => {
  await next({ opacity: 1, border: '10px solid tomato' })
  await next({ opacity: 0, transform: 'translate3d(-50%,0,0)', border: '10px solid yellow' })
},

First I change border to border: '10px solid tomato' which happens, but second animation (with translate and another border change) doesn't. If I swap their places, the result is the same - first animation is triggered and second not.

Am I doing something wrong or is it really a bug?

[colepeters]

🐛 Bug report!

I've just tried upgrading to 9.0.0-beta.24, and useTrail is no longer animating its items in a trail, but rather all at once. Here's a repro for reference: https://codesandbox.io/s/confident-cloud-tvyqu?fontsize=14&hidenavigation=1&theme=dark

[aleclarson]

@warsawgentleman That's a bug, but it's fixed in the latest canary. However, the canary requires you to change the usage of useTransition slightly (see here), because it's been rewritten. Even with the canary, your sandbox isn't bug-free. I don't know when I'll be able to take a closer look. Thanks for reporting!

[aleclarson]

@colepeters Using v8 seems to have issues as well. With the latest canary, useTrail is no longer animating all 3 boxes at once, but there are other issues that need to be looked into (see here). Thanks for reporting!

[ShanonJackson]

@dbismut @aleclarson

Yeah i do know about react-use-gesture we use it heavily at the moment to create multi column drag-and-drop. Love the library.

This is going to be a long detailed post just around spit balling ideas i have a lot of these but these are just a few.

Feature: Layout Animation

Framer Motion has positionTransition which is a prop they've added to their own animated.div style component, with it you can do animation between layout states without "math"; By math based layouts i mean https://codesandbox.io/s/20yw31pyxj?from-embed where each sibling is position with translate3d + absolute, the problem with positioning elements this way is that you essentially have to write all the code yourself in the parent to do css's job for it without access to everything css has access to. I.E Try doing a math based layout where each item has a dynamic height.

This previously would be very very hard to achieve with react but now with useLayoutEffect it becomes a lot easier in-fact you can implement it with react-spring in very little code here's a terrible demo i threw together for you https://codesandbox.io/s/drag-and-drop-spring-j2r9j

Problems with this implementation (Framer Motion shares this problem):

• State is stored in the component with the last position why this isn't a good idea is it makes multi-column transitions impossible because elements will always remount when they move from a sibling of 1 element to a sibling of another. (Currently react keys are used in the demo to allow sibling layout animation)

How to fix it:

Create a component that controls transitions between single and multi layouts, it renders nothing but its children wrapped in a context in which they store their state to persist it between remounts.

How it works:

• Each component's position and last position is animated to and from relative to the BODY and not relative to its container.

• Each components position is stored by a unique id (key or otherwise) that gets registered in the context to store state of the last position this key is controlled in the parent by people using layout so that they can decide what key system they want to use.

*Why is this useful *

• Drag-And-Drop (obviously, single and multi column)
• List reordering animations (see react-spring's own examples)
• List item deleting animations (where you want items around the deleted one to slide nicely into their new position)
• Any other use case where you want an element to move nicely between two DOM positions without having to calculate the math yourself in the parent.
• No other animation library i know about can currently do multi column layout animations this easily which i believe will put react-spring way ahead of the game.

Feature: animate auto width and auto height with hooks
Currently, there's some issue floating around somewhere where the react-spring says that because hooks don't control the render phase animations to "auto" couldn't be implemented and will remain solely as a feature of the render props API.

This is true, however work arounds are possible i'll leave it up to peoples imagination as to what the API should actually look like but just an idea of how this can be achieved is something like this...

const AnimateAuto = () => {
        const auto = useSpring({width: 0,  to: {width: "auto"}});
        return auto((styles) => {
                <animated.div style={styles}>
                </animated.div>
         })
}

(where auto is implemented as wrapping the children in a fragment, and injecting into that fragment that fixAuto stuff)
Obvious issues: useSpring currently doesn't return a function, i'm just merely using it as a hypothetical of how it could be achieved with hooks.

Why?

• We should move away from the render props API now that hooks exist; Correct me if i'm wrong but everything in the render props API can be achieved with the hooks API except "auto" animations meaning we could potentially remove the render props API after this is released
• importing Spring from RenderProps just for "auto" animations adds to bundle size because people now have to use both useSpring + Spring as apposed to just useSpring. (hope that makes sense)
• "React-Resize-Aware" and Resize observer polyfil are incredibly buggy where-as react-springs implementation (fixAuto) is more reliable and should be brought into the hooks api.

I have a lot more ideas and would love to share our actual internal code to show you where our pain points are at the moment with react-spring. I absolutely adore the library i just want to reiterate on that fact as i know my earlier post could be seen as an attack but really i just want this library to flourish.

Here is a snapshot of our component library from 1 year ago, we're about to open source an incredibly polished version in January, just posting it here to give you guys an idea of how we use react-spring.

http://qrious-storybook.s3-website-ap-southeast-2.amazonaws.com/

• SpawnModal (which grows/shrinks modal from a location) uses react-spring, useTransition to animate in/out of DOM and for width/height animations.
• DatatableEdit (Drag-And-Drop multi-column uses react-spring + react-use-gesture + virtualization for performance written from scratch)
• Checkbox animates tick with react-spring
• Modal useTransition to animate in/out of DOM and for width/height animations
• DataTable when you click a row it chains animations to show/hide that content.

Wish i had a deployment floating around of our Component Library today to show how heavily we use it now as apposed to 1 year ago. DatatableEdit would shrink its source code by about 70% if we didn't have to calculate all that position math for drag and drop.

[dbismut]

Hey @ShanonJackson, thanks for the detailed input and interesting read. Quick one before I go to bed, what you’re describing is the FLIP technique right?

Because yes, I agree that this is something that does miss in the current ecosystem. It’s just that FLIP can be tricky (I think react-spring used to animate auto at one point but stopped because it wasn’t reliable).

Have you tried react-flip-toolkit out of curiosity?

[ShanonJackson]

I have used the old "auto" animation stuff in react-spring and based on my experience trying a lot of other methods out there react-spring is the most reliable (by other methods i mean resize observer polyfill and react-resize-aware).

Now after you've linked that i understand what you mean by the FLIP technique; No i haven't tried that library it looks interesting from a sense that their using transform: matrix instead of translate3d i'm assuming its because matrix performs better. However they're also storing state on the DOM elements themselves with data- properties which is extremely dirty. Also after a quick skim read of the source they're also not leveraging useLayoutEffect which makes layout stuff alot more trivial.

Would be great if this was built into react-spring as i feel like layout animations are an extremely common use case of this library.

[dbismut]

Hi @ShanonJackson I've moved our conversation to #9 so that @aleclarson can focus on critical feedback for v9. I've hidden our comments as off topic for lack of a better reason, but I appreciate the time and efforts you've put in making your point. We'll try to investigate how to find the best API for FLIP ;)

[aleclarson]

9.0.0-canary.808.14.192785c is ready for testing! 🥳

See the commits: https://github.com/react-spring/react-spring/compare/610d311b68aae8fd552f299435712f7dd857214d...719834def159181f42489c281ef05aa8b81bd37a

More info: #808

[Doesntmeananything]

First of all, thanks for all the awesome work on react-spring. It's a real joy to use, and you guys rock!

It seems I've run into an issue with 9.0.0-canary.808.14.192785c. I'm not sure how to reset animations which was previously achieved with reset: true passed in as a prop. For example:

const { radians } = useSpring({
    to: async next => {
      await next({ radians: 2 * Math.PI });
    },
    from: { radians: 0 },
    config: { duration: 7000 },
    reset: true,
  });

now leads to animations playing only once.

So how would you implement this functionality on the current version?

Full example available here (I've taken the official example and bumped the version of react-spring to the aforementioned canary): https://codesandbox.io/s/eloquent-williamson-wds49

Please let me know if you need any additional info. Thanks!

[aleclarson]

@Doesntmeananything Thanks for the positivity!

In v9, that example will call the async to function on every render (even if reset: true is removed), because your to prop is a new function each time. To avoid that, you can do one of these 3 things:

• wrap the to prop with useCallback
• pass a props function to useSpring (instead of a props object)
• pass an array of dependencies that tells useSpring when to update its animation

// with useCallback:
const { ... } = useSpring({
  to: useCallback(async next => {...}, []),
})

// with a props function:
const [{ ... }] = useSpring(() => ({
  to: async next => {...},
}))

// with dependencies:
const { ... } = useSpring({
  to: async next => {...},
}, [])

Examples

To animate once from 0 radians to 2π radians, use this:

const { radians } = useSpring({
  to: { radians: 2 * Math.PI },
  from: { radians: 0 },
  config: { duration: 7000 },
})

 

To animate on every render from 0 radians to 2π radians, add reset: true to the previous example:

const { radians } = useSpring({
  to: { radians: 2 * Math.PI },
  from: { radians: 0 },
  config: { duration: 7000 },
  reset: true,
})

 

To animate repeatedly from 0 radians to 2π radians, use this:

const { radians } = useSpring({
  to: useCallback(async next => {
    while (true) {
      await next({ 
        radians: 2 * Math.PI,
        reset: true,
      })
    }
  }, []),
  from: { radians: 0 },
  config: { duration: 7000 },
})

useLoop hook

If you're using while loops in to functions a lot, you could make a useLoop hook:

const useLoop = (to, deps = []) =>
  useCallback(async next => {
    while ((await to(next)) !== false) {}
  }, deps)

const { radians } = useSpring({
  to: useLoop(async next => {
    await next({ 
      radians: 2 * Math.PI,
      reset: true,
    })

    // Return false to stop the loop. (optional)
    return false
  }),
  from: { radians: 0 },
  config: { duration: 7000 },
})

With a little more code, the useLoop hook could take a props object or an array of props:

// Animate from 0 radians to 2π radians forever.
to: useLoop({
  radians: 2 * Math.PI,
  reset: true,
})

// Animate between "blue" and "red" forever.
to: useLoop([
  { color: 'blue' }, 
  { color: 'red' },
])

 

Anyway, let me know if you have any more questions!

[Doesntmeananything]

@aleclarson What a brilliant answer, thank you very much! You should definitely consider adding it to the docs in some fashion, as it succinctly covers a lot of ground for this particular use case.

In general, v9 looks absolutely fantastic. I like how it improves DX by allowing you to express the behaviour you want more naturally, while simplifying the API and keeping the overall surface area of the library low.

Thanks again, and stay awesome!

[iryanclarke]

@aleclarson On lots of recommendations from looking on Spectrum was to update to v9 beta to fix the useTransition issue where notifications would not be removed individually (https://spectrum.chat/react-spring/general/transitions-with-seperate-durations~7d2cd2f8-f052-4a7c-b413-6d5a90fa5265)

It actually works now, but it does doesn't seem to properly animate items out

I've used the old config like so:

config: (item, state) => (state === "leave" ? [{ duration: 5000 }, config, config] : config), and even fiddled around with adding a duration to the other configs. Just pinging here to check if it's a regression

[ShanonJackson]

Noticed on 9.0.0-beta.34 useSprings if the number of springs change (first argument) the amount of springs the function returns no longer changes.
Previously it would watch this number on each update.

[lorenzocadamuro]

Hey guys,

I switched from 8.0.27 to ^9.0.0-beta.34, but the following code doesn't work anymore:

import React from 'react'
import { a, useSpring } from 'react-spring'

export default ({ children, color }) => {
  const props = useSpring({
    color,
  })

  return (
    <a.div
      style={props}
    >
      {children}
    </a.div>
  )
}

I haven't errors in the console. It switches the color without animation.

[dbismut]

@ShanonJackson @lorenzocadamuro make sure you’re using latest canary 808.14 if I’m not mistaken.

[aleclarson]

Always try the latest canary here before reporting a bug. Thanks!

And prefer opening a new issue for bug reports.
This issue is really meant for general feedback on v9.

[dbismut]

Noticed on 9.0.0-beta.34 useSprings if the number of springs change (first argument) the amount of springs the function returns no longer changes.

FWIW, I ran into the same problem with the latest canary, but you can pass a dependency array to useSprings like so:

const [springs, set] = useSprings(
  children.length,
  i => ({ /*...*/ }),
 [children.length] // <- deps array
)

Hope it helps.

[aleclarson]

@dbismut @ShanonJackson Fixed in 9.0.0-canary.808.16.68edca3

[aleclarson]

9.0.0-canary.808.17.55c5691 is ready for testing! 🥳

See the commits: https://github.com/react-spring/react-spring/compare/3bbb8712f51c7b61d07687196a6c05c230262386...55c569162b8583ea9d22e1970e4edea2761d3252

[jamiebuilds]

useTransition<Item, Props>() isn't as usable anymore:

// worked previously, now breaks
useTransition<Item, { value: number }>(item, null, {
  immediate: true,
  value: 0,
  from: { value: 1 },
  enter: { value: 0 },
  leave: { value: -1 },
  config: config.stuff,
})

// now:
useTransition<Item, { value: number } & UnknownProps & UseTransitionProps<Item>>(item, null, {
  immediate: true,
  value: 0,
  from: { value: 1 },
  enter: { value: 0 },
  leave: { value: -1 },
  config: config.stuff,
})

Before

https://github.com/react-spring/react-spring/blob/66087e18b64d6c6d5fd75f6d84e85ed59714769d/types/web.d.ts#L217-L225

After

https://github.com/react-spring/react-spring/blob/9c19e36b8c061b872ac563f1d5d9e99fab324096/packages/core/src/useTransition.d.ts#L22-L29

[aleclarson]

@jamiebuilds Why do you need explicit type parameters? Type inference should handle that.

[phaistonian]

@aleclarson Is this scheduled to be fixed in 9.x?

[aleclarson]

@phaistonian Getting a 404 on your link

[Slapbox]

@aleclarson works for me (kind of.) Trying to fork it fails, so I can't see if the issue exists in beta.34. The link is using a canary build, 808.12

Error it shows is Cannot animate to the given "to" prop, because the current value has a different type

Gist of the code

[aleclarson]

Sounds like https://github.com/react-spring/react-spring/issues/867, which is fixed in the latest canary.

[jjang16]

setting ref for RenderProps api breaks for beta.34

  import { Spring } from 'react-spring'
// ...
  const ref = React.useRef(null)
// ...
  return (
    <Spring ref={ref}
     {...}>
     {...}
    </Spring>
  )

Warning: Function components cannot be given refs. Attempts to access this ref will fail.

is setting ref for renderProps api deprecated?
or is there any other way to get the controller from the component?

[aleclarson]

@jjang16 Please try with the latest canary. 👍

[wbobeirne]

Running into an issue in combination with #601, if you're using typescript and you add .cjs to your import to get the commonjs version, you don't get the types because it's expecting a .cjs.d.ts file, and doesn't pickup the regular .d.ts file.

For what it's worth, I'm in agreement with the OP of #601 that exporting es modules by default is confusing for people to work around, and goes against what the majority of modules do.

[gtolarc]

I agree with you. @wbobeirne Actually, I am having the same problem, and building by artificially adding cjs.d.ts file to solve it. (with nextjs v9 & react-spring v9) This was too confusing. So, basically, it is necessary to provide a cjs.d.ts file and describe the guide on the document or use the basic module as cjs. What do you think? @aleclarson

[NerdCowboy]

It appears there might be a regression of https://github.com/react-spring/react-spring/pull/910.

Using Gatsby, I upgraded to 9.0.0-beta.34 and getting the error, TypeError: Cannot read property 'isReactComponent' of undefined anytime I try gatsby build.

No issues when running gatsby develop though.

[aleclarson]

@wbobeirne @gtolarc The .cjs.d.ts module will exist in the next canary. Thanks 👍

@NerdCowboy That hasn't been released under 9.0.0-beta yet, but the latest canary has it.

[Slapbox]

When might another canary land? We're excited for React-Spring, but a few broken things have had us unable to use it. Sadly other things broken in v8 prevent us from using it either. Hope I don't sound ungrateful asking. React-Spring is just awesome and I'm excited and looking forward to implementing it.

[IngoValente]

I'm getting some weird behaviour in the latest canaries, starting from the versions beginning with 809. Last version of the 808's works as expected.
Looks like the spring gets reset on a component rerender, see example here: https://codesandbox.io/s/initial-rocket-lubsl
Drag the red rectangle, then resize your window -> the rectangle will jump back to its initial position. Switch to the last 808 version, and it remains in the correct position.
Is this a change in the API I'm missing or a potential bug?

Scratch that. Looks like useSpring now has a dependency array to keep it from updating when not necessary:

const [{ x, y }, set] = useSpring(() => ({ x: 0, y: 0 }), [])

[aleclarson]

@IngoValente Please open a new issue whose title starts with [808] and I'll check it out

@Slapbox Have all the issues you encountered been reported? Canary coming in the next few days maybe.

[Slapbox]

@aleclarson thanks for your response, count me among the excited! #922 is a showstopper for us. It's the only major bug I'm aware of.

[aleclarson]

@IngoValente If your props function was being called on every render, that was fixed with https://github.com/react-spring/react-spring/commit/55c569162b8583ea9d22e1970e4edea2761d3252 in the 808.17 canary.

@Slapbox I think there's a fix for that waiting to be released. Stay tuned!

[asfktz]

Hi,
I notice that decay is not working with v9.0.0-beta.34

See the rocket example in "React Use Gesture":
https://codesandbox.io/s/initial-rocket-8r4pn?file=/src/index.js

[SokichiFujita]

This <animate> component's TypeScript error (TS3589) is still remaining in v9.0.0-beta.34 . https://github.com/react-spring/react-spring/issues/653 But it has been resolved in canary of v.9.0.0.

https://github.com/react-spring/react-spring/issues/653

[dlindenkreuz]

@asfktz
I notice that decay is not working with v9.0.0-beta.34
...
https://codesandbox.io/s/initial-rocket-8r4pn?file=/src/index.js

decay works fine for me.
get was renamed to getValue though 😉

# line 21
- { initial: () => pos.get() }
+ { initial: () => pos.getValue() }

[iagodahlem]

I found a bug using v9.0.0-beta.34 with the useTransition hook.

When I try to update any item of the array being passed as the first argument to useTransition, the items returned from the hook are never updated.

I used the List-Reordering example from the docs as a base for simulating the bug: https://codesandbox.io/s/usetransitionflip-1w1ul?file=/src/index.js

Try clicking on the "increase quantity" button on each item, you will see that the rows array is updated, but the transitions return from the hook never reflects those changes.

[brotzky]

@iagodahlem try a canary release. I think your issue has been solved: https://github.com/react-spring/react-spring/issues/949

[Slapbox]

@iagodahlem @brotzky the latest canary available on npm is from January, but the PR is from March so it will be in the next canary.

[aleclarson]

Replaced by #985

To those who reported an unsolved issue: Please reproduce it using v9.0.0-rc.1, then open a new issue with your report. Thanks! 👍