✌️ A spring physics based React animation library

🐛 Bug Report

Hi, i'm using these to animate R3F components, but I do not run into this in development. The issue only occurs in production:

Uncaught TypeError: r.willAdvance is not a function
    at 9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1
    at Module.d (9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1)
    at a.b.advance (9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1)
    at 9cfe2b4608e7231bacc0d7d7deffe07ef300d220.20fefe92f1d342a18960.js:1
    at 28ddf37e733bed61e8c6ac53a0464422aa01203b.0544bc5f695fe9930e09.js:1
    at Array.forEach (<anonymous>)
    at xe (28ddf37e733bed61e8c6ac53a0464422aa01203b.0544bc5f695fe9930e09.js:1)

To Reproduce:

Here is the code example i'm trying to run, and again, I want to stress this only happens in production

import React, { useRef } from 'react';
import { Canvas, useFrame } from 'react-three-fiber';
import { useSpring } from '@react-spring/core';
import { a } from '@react-spring/three';
import styled from '@emotion/styled';

const endless = true;

const Cube = () => {
  const m: any = useRef();
  useFrame(() => {
    m.current.rotation.y += 0.01;
  });

  const { scale, color } = useSpring({
    from: { scale: [1, 1, 1], color: '#17bebb' },
    to: async next => {
      while (endless) {
        await next({ scale: [4, 4, 4], color: '#FAD8D6' });
        await next({ scale: [1, 1, 1], color: '#17bebb' });
        await next({ scale: [3, 3, 3], color: '#CD5334' });
        await next({ scale: [2, 2, 2], color: '#EDB88B' });
        await next({ scale: [1, 1, 1], color: '##17bebb' });
      }
    }
  });

  return (
    <a.mesh ref={m} scale={scale}>
      <boxBufferGeometry attach="geometry" args={[1, 1, 1]} />
      <a.meshStandardMaterial attach="material" color={color} />
    </a.mesh>
  );
};

const AnimatingWithReactSpring = () => {
  return (
    <Container>
      <Canvas>
        <ambientLight position={[1, 1, 1]} />
        <Cube />
      </Canvas>
    </Container>
  );
};

const Container = styled.div`
  border: 1px solid #ccc;
  border-radius: 5px;
`;

Expected behavior

I expect it to run well, just like it does in development

Environment

• "@react-spring/core": "^9.0.0-rc.3"
• "@react-spring/three": "^9.0.0-rc.3"

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 [email protected] -E
# or
npm install react-spring@next -E

_{Last Updated: May 11, 2020}

Try the UMD bundle: https://cdn.jsdelivr.net/npm/@react-spring/[email protected]/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

Problem

Preface

Whilst I think our documentation coverage is good, I think it can be hard to find what you want. The information architecture of the site isn't quite right. There are pieces of documentation we want to be shouting about e.g. our Imperative API but it's not really doing that.

Going forward

I don't think it's something i'll be able to solve in a day or two, it'll be a classic gradual re-write / shape / tweak. But I welcome contribution either in code or suggestions here. All suggestions will be taken into account, but realistically we can't implement everyone's opinion. It'll be about trying to get the clearest message.

Solution

How can you help?

To get me started, I need to understand the pain points!

• What didn't you like about the documentation?
• What did you find confusing or difficult using the library at first
• What do you like about our documentation compared to others?
• What other documentation sites do you like? (Doesn't have to be animation related)

My own thoughts

For transparency here's a few thoughts i've had:

• We should have an examples page, to show case all of them, they're hiding with the related component!
• Search bar, it's 2021 algolia is a thing, we should get on it!
• The basics are too long, they're not basics if they're that long!

Unexpected identifier

/Users/iammark/Projects/openhouse/node_modules/react-spring/dist/addons.js:1
(function (exports, require, module, __filename, __dirname) { import _extends from '@babel/runtime/helpers/esm/extends';
                                                                     ^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.react-spring/dist/addons (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:2031:18)
    at __webpack_require__ (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:1785:82)
    at __webpack_require__ (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:23:31)
    at Object.3 (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:1964:18)
    at __webpack_require__ (/Users/iammark/Projects/openhouse/.next/server/static/development/pages/index.js:23:31)

When I tried to import parallax from 'react-spring/dist/addons' it's throwing me this error. This is my import code

import { ParallaxLayer } from 'react-spring/dist/addons'
import { Spring } from 'react-spring'

If you can hear my keystrokes you can see a huge delay suddenly happens when I import react-spring. I believe the types must be causing some trouble somewhere for typescript. I'm using typescript 3.4.1 and react-spring 8.0.18.

https://v.usetapes.com/hNl9HhHlSE

• [ ] making all hooks available with full docs (useSprings, useSpring, useTrail, useTransition, useChain)
• [x] maybe making useSprings the base primitive internally for code re-use and leaner bundle size
• [ ] decide on uniform api shapes, for instance useTransition(items, keys, props), useTrail(length, props), useSpring(length, props)
• [x] useKeyframes is probably purposeless since custom hooks fulfil all its core values. Hooks can already be scripted, chained, canceled and awaited. Maybe some of the functionality (arrays, async scripting) could be made generic so that all primitives get use it instead of just transitions and keyframes (useSpring({ to: [{ opacity: 1 }, { color: 'red' }, { opacity: 0 }] })). or to: async next => {...}, though that's what the set method already does.
• [ ] while we're at it, do we need to at all when using hooks, should it be a separate arg, separate from the config (delay, config, immediate, etc)
• [x] slowly removing dependencies from class based primitives, making hooks the preferred api but allowing it at the same time to be as lean as possible without carrying around old bulk
• [ ] turn animated/createAnimatedComponent.js into a function
• [ ] deciding on a brand/icon

render props are safe of course and won't be affected by any of this.

Hi,

This is kind of ground breaking. I think this is er very easy and well thought abstraction for animating stuff based on state. I will definitely take a closer look into this tool :-)

My biggest problem(which is kind of small) at the moment is that there aren't any typings to find for this package yet. I would really love to see some typings for this libary as it would make the whole API easier to get into and make it way easier to use in Typescript projects :-)

Follow-up to #615

• [x] rework the Controller class (a lot)
• [x] rework the TypeScript types (with tests!)
• [x] rewrite the Render Props API on top of hooks (#561)
• [x] merge #626
• [x] look for issues fixed by this PR

Changelog

Closes #335 Closes #362 Closes #383 Closes #432 Closes #436 Closes #461 Closes #535 Closes #559 Closes #571 Closes #576 Closes #591 Closes #594 Closes #613 Closes #623 Closes #624 Closes #629 Closes #633 Closes #634 Closes #637 Closes #641

🐛 Bug Report

As of the this commit React Spring won't work whenever a CSP without 'unsafe-eval' directive is active.

To Reproduce

Set content security policy (CSP) without 'unsafe-eval' in connect-src directive.

First, let me say this library looks great.

I am one of the contributors to vx and I am attempting to port a few of my animation examples from react-move to use react-spring. I've had performance issues with react-move on occasion and wanted to see how well react-spring performed, especially when leveraging the native prop.

I'm currently struggling with how my current react-move implementations port over to react-spring (and if they even can) and was hoping you could give some guidance (or show me how it's done 😄).

Collapsable tree

• https://codesandbox.io/s/n3w687vmqj

The first is a collapsable tree that animates the nodes (and links between them). When expanding a node, the child nodes will "zoom out" from their parent, and when collapsing, the child nodes will "zoom in" into their parent's previous location. In react-move, within each lifecycle hook (start, enter, update, leave) you pass a function that takes in a node instance and you return an object (as opposed to just setting an object, like react-spring does).

(see NodesMove.js in codesanbox, but the gist is...)

<NodeGroup
  data={nodes}
  keyAccessor={d => d.data.name}
  start={node => {
    const parentTopLeft = getTopLeft(node.parent || { x: 0, y: 0 }, layout, orientation);
    return {
      top: parentTopLeft.top,
      left: parentTopLeft.left,
      opacity: 0
    };
  }}
  enter={node => /* ... */}
  update={node => /* ... */}
  leave={node => /* ... */}
>

I'm not sure if using <Transition> can work in this situation, or if I'm missing something. Also, the location of a node's previous parent isn't always correct based on the order you close/open nodes, but it works OK.

Zoomable sunburst / partion

• https://codesandbox.io/s/v3x0yw11q5
• https://codesandbox.io/s/73jl8vrmkq

In these examples, I tween the domain and ranges of the x and y scales to collapse/hide the sunburst / partition pieces. I'm especially having difficulty wrapping my head around how to use Transition/Spring to replicate this.

Also, my react-move example was never as smooth as the original d3 example so I have high hopes this will work better with react-spring.

Any help you could provide on how to replicate these examples would be much appreciated.

⚠️ More testing required. See demos here

This PR is a rewrite of useTransition from scratch in hopes of simplifying both the API and the internals. Here's an example of the new API:

import {animated, useTransition} from 'react-spring'
const MyComponent = ({ items, ...props }) => {
  // A function is returned, instead of an array.
  const transition = useTransition(items, props)
  // Call the function to render your items.
  // The "values" argument is just like what "useSpring" returns.
  // The "item" argument is the item being transitioned.
  return transition((values, item) => (
    <animated.div style={values}>{item}</animated.div>
  ))
}

Once #670 is merged, you can pass a deps array and you'll get the update and stop functions returned to you:

const [transition, update, stop] = useTransition(items, props, [...deps])

Also, the Transition component has changed. Its children prop now takes different arguments:

<Transition
  items={items}
  from={{ opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {(values, item) => (
    <animated.div style={values}>{item}</animated.div>
  )}
</Transition>

Notable changes

• The keys argument is now the key prop
  • Note: The key prop is optional for primitive items and mutable object items
• Returns a transition function instead of a transitions array
  • Pass a render function to it and you'll get the animated values for each item
  • The element you return has its key prop set for you automatically
  • The phase isn't exposed to the user anymore
• Now safe to use in concurrent mode
• Unique mode is the new default (and the unique prop was removed for simplification)
• Lazy mode is the new default (and the lazy prop was removed in favor of expires)
• Event props cannot be passed directly (eg: props.onFrame), but you can still pass them in specific phases (eg: props.enter.onFrame)
• The reset prop now uses the initial prop if it exists
• The onDestroyed prop was removed (was there a good use case for this?)
• The order prop was removed

New key prop

Alias: keys

When immutable objects are passed as items, they need explicit keys in order to reconnect them with any existing transitions.

For an array of immutable objects, pass a function that maps over the array and returns the unique id of each item...

key: item => item.key,

... or pass an array of keys.

// Using lodash.map
key: _.map(items, 'key'),

For a single immutable object, you can pass its key directly (no function required).

key: item.key,

New expires prop

For controlling when deleted items are dismounted after their leave animation finishes. Set to 0 for immediate dismount. By default, dismounting is postponed until (1) next render, or (2) all transitions are resting. Any value above 0 is interpreted as "milliseconds to wait before dismounting is forced".

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.6.1

What's Wrong?

When the ParallaxLayer is sticky, it does not work as demonstrated in the example. Between the start and end points, the Layer vanishes. It is only visible at the start and end point.

To Reproduce

In another Bug report: reaink has produced a repo where you can see the reproduced problem.

Example: https://codesandbox.io/s/parallax-part-component-layer-kg5yw0

Expected Behaviour

The layer should be sticky between the start and end value and should not disappear and reappear.

Link to repo

Example: https://codesandbox.io/s/parallax-part-component-layer-kg5yw0

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.6.1

What's Wrong?

Callbacks onStart, onChange, onRest are not called using imperative style (they work using external SpringRef tho).

To Reproduce

See codesandbox

Expected Behaviour

Callbacks to be called

Link to repo

https://codesandbox.io/s/cool-euler-svriws

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.5.5

What's Wrong?

I love the example on this page in react-spring.dev.

I tried to implement it to my Gatsby project, with the source code from Sandbox of this example but found, the animation is laggy/jumpy at the very last frame.

For a better understanding, I made a 60fps gif to show this:

See the very last frame after expand/shrink which is very laggy/jumpy?

Work around 1

comment out precision: 0.01,

const config = useControls({
    mass: 1,
    tension: 170,
    friction: 26,
    clamp: false,
    // precision: 0.01,
    velocity: 0,
    easing: (t) => t
  });

Work around 2

set precision to 0.001

const config = useControls({
    mass: 1,
    tension: 170,
    friction: 26,
    clamp: false,
    precision: 0.001, // a much smaller value
    velocity: 0,
    easing: (t) => t
  });

To Reproduce

I created a repo to reproduce this.

Don't worry, this repo is based on Gatsby's official starter template: gatsbyjs/gatsby-starter-default, won't take too much time to get running.

npm install
gatsby develop --verbose

should work.

Expected Behaviour

Smooth animation even at the very last frame after expand/shrink, just like the example in this page on react-spring.dev.

Link to repo

https://github.com/np36/gatsby-starter-debug-react-spring-1209

A clear and concise description of what the feature is

Say I my make my own native three element in r3f:

const ImageFadeMaterial = shaderMaterial(uniforms, vertexShader, fragmenShader);
extend({ ImageFadeMaterial })

Then at the very least, it would be good that typescript new this component could be animated, or even better it would be great if the component was added to the animated object we export:

<animated.imageFadeMaterial />

Why should this feature be included?

Including this feature would make a more seamless integration between r3f & rs

Please provide an example for how this would work

No response

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.5.5

What's Wrong?

when on onRest callback, I expect "top" value to 100, but it is not.

const props = useSpring({
    from: { top: 0 },
    to: { top: 100 },
    onRest: () => {
      console.log(ref.current?.style.top); // Wrong: it is not 100, about like 99.7959px
      window.requestAnimationFrame(() => {
        console.log(ref.current?.style.top); // Right: it is 100
      });
    }
});

To Reproduce

See Codesandbox.

Expected Behaviour

See Codesandbox.

Link to repo

https://codesandbox.io/s/react-spring-onrest-xfsq1j?file=/src/App.js:240-246

Which react-spring target are you using?

• [x] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.5.5

What's Wrong?

I need to animate a self-destructing toast component which is supposed to slide up to position on mount and slide down and off the screen on unmount. I am using the code example from the new docs, but my component unmounts without the animation specified in the "leave" prop.

Here is my component code:

import React from "react";
import useTimeout from "../hooks/use-timeout";
import { useTransition, animated } from "@react-spring/web";

function TimedDismissableToast(props) {
    const { modalShow, setModalShow } = props; // modalShow.show is a boolean

    const transitions = useTransition(modalShow.show, {
        from: { y: window.innerHeight },
        enter: { y: window.innerHeight - 300 },
        leave: { y: window.innerHeight }
    });

    useTimeout(() => {
       // ...code to unmount the component
    }, modalShow.timeout);

    const styles = {
        left: "80px",
        // ...some more styles here
    };

    return transitions((style, item) => (
        <animated.div style={{ ...style, ...styles }}>
           // ...component's html
        </animated.div>
    ));


export default TimedDismissableToast;

Can anyone please help identify the problem and fix the unmount animation?

The docs for useTransition could also use some examples and a clearer explanation for each prop in the Reference section.

To Reproduce

Screen recording: link

Expected Behaviour

i expect the component to slide down and off the screen on unmounting.

Link to repo

not available, see code above