v9.0.0-rc.3 –– Questions and feedback

[aleclarson]

Go here first: v9 docs

Please leave your questions and feedback about v9.0.0-rc in this thread.

 

🐛 Bug reports deserve their own issue. Fork this sandbox to create a minimal repro.

npm install react-spring@9.0.0-rc.3 -E
# or
npm install react-spring@next -E

_{Last Updated: May 11, 2020}

 

Try the UMD bundle:
https://cdn.jsdelivr.net/npm/@react-spring/web@9.0.0-rc.3/index.umd.min.js

Read the source:
https://github.com/react-spring/react-spring/tree/v9.0.0-rc.3

Have any suggestions to improve the docs?
Speak up here: #967

Want to write a blog post for the docs?
Speak up here: #973

 

[TrySound]

Shared package has circular dependencies which may lead to unwanted effect in some cases.

[!] Error: Circular dependency:
../node_modules/@react-spring/shared/esm/globals.js ->
../node_modules/@react-spring/shared/esm/FrameLoop.js ->
../node_modules/@react-spring/shared/esm/globals.js

[aleclarson]

9.0.0-rc.2 is now available 🚢

[aleclarson]

@jerry84 Moved your question about tree-shaking here to help others find it.

[aleclarson]

I've found a bug with rAF global injection. At Discord - we have an interesting problem where we utilize popout windows and need to inject the rAF dynamically as you change focus to different windows to ensure the focused window is the source of the rAF so animations don't get slowed down or paused (especially if the window is minimized)

However, a bug exists wherein you have a popout window focused that is powering rAF and you close the popout window while any animation is running - all animations will get stuck because the rAF in FrameLoop ends up getting interrupted because the popout window closing kills the rAF callback.

@amadeus Just a few days ago, I released rafz and integrated it with v9. That library never caches the injected rAF impl, and Globals.assign({ requestAnimationFrame }) forwards to rafz.use(requestAnimationFrame) in the next RC, so your workaround will be unnecessary. 👍

[aleclarson]

@hoestreich #985 (comment)

Please open an issue for this (with a sandbox) when you get time. 👍

If you prefer not to share the code publicly, you can message me on our official Discord server.

[aleclarson]

@shresthabijay #985 (comment)

Could you open an issue for this request? You can copy-paste that comment as-is. 👍

[kernelwhisperer]

scrollTop property on animated.div seems to be broken on the latest v9 versions:

Sandbox link: https://codesandbox.io/s/react-spring-v9-scrolltop-bug-lrz65?file=/src/App.js
(switching to 8.0.27 works)

[kernelwhisperer]

from @aleclarson on discord:

You need to provide a start value: from: { scrollTop: 0 }

This fixes it, yes, thanks! 😄 (I guess on v8.0.27 the lib used to do that automatically.)

To achieve my behavior of a initial scrollTop I have to do this now:

  const { scrollTop } = useSpring({
   from: { scrollTop: 0 }
   to: { scrollTop: 100 },
   immediate: true
});

And then to set immediate: false on subsequent calls.

I can live with this... hovever I would still consider this a bug, and expect this expression to work as an equivalent, just like it does in v8.0.27:

  const { scrollTop } = useSpring({
    from: { scrollTop: 100 }
  });

and this should be possible too:

  const { scrollTop } = useSpring({
    from: { scrollTop: 100 }
    to: { scrollTop: 100 }
  });

It works with animated.span so this is most likely an issue in animated.div's scrollTop handling:
https://codesandbox.io/s/react-spring-v9-scrolltop-bug-forked-7h3vf?file=/src/App.js

[JoostKiens]

I notice velocity is working unexpectedly or at least differently in v9.0.0-rc3. compared to v8.0.27.

Here is a sandbox with v8.0.27, where velocity works as expected.

However, in this fork with v9.0.0-rc3, but the velocity has a stronger effect on the spring value.

Both sandboxes have the same config:

config: { velocity: 30 }

and a spring value going from 0 to 1.
Because of the higher initial velocity, the value "overshoots" to ≈1.2 in v8, however in v9 it "overshoots" to ≈823.09.

Could this be a bug, or am I doing something silly 🤷‍♂️?

[aleclarson]

@JoostKiens The velocity prop is "per ms" in v9, while it's "per sec" in v8. (see d5ad40f)

[JoostKiens]

@aleclarson ah i missed that, thanks! 🙏

[jackmellis]

Just gone from v8 to v9 and not sure if I've missed a step from the breaking changes docs as I just immediately get typescript errors.

I tried to recreate the example in codesandbox but it worked fine: https://codesandbox.io/s/mystifying-shtern-egmqx

Locally for the exact same setup I get this ts error:

Types of property 'opacity' are incompatible.
    Type 'SpringValue<number>' is not assignable to type '"inherit" | "initial" | "-moz-initial" | "revert" | "unset" | FluidValue<Globals, any>'.

I can only guess that I've missed something painfully obvious here...

[KurtGokhan]

Can you put the fix for this issue (#1078) to npm in some way. As I see it was fixed 5 months ago and RC4 have a long way to go.

[RezaHeydarii]

Animated.div dont render in the Production Mode but it's OK in the Development.
I'm using react & Typescript

[DanielBalog86]

@RezaHeydarii This is a known issue and has already been fixed on source, so I'm sure once rc.4 drops this will be fixed.

In the mean time, there is a hot fix that involves setting useEffect:true in the package.json of react-spring using a script while making a production build.

The workaround is described here: #1078 (comment)

That's what I use and it works.

[nickvirdenfdtrl]

The NPM distribution of this package is not transpiled to ES5, so it will break projects that aren't looking for it that support older browsers, such as IE11. Any way this could be fixed?

[YassienW]

Since the unique prop was removed, is there another way to prevent the re-use of items going in/out with the same keys?

[explorador]

The NPM distribution of this package is not transpiled to ES5, so it will break projects that aren't looking for it that support older browsers, such as IE11. Any way this could be fixed?