✌️ A spring physics based React animation library

Overview




react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough to confidently cast your ideas into moving interfaces.

This library represents a modern approach to animation. It is very much inspired by Christopher Chedeau's animated and Cheng Lou's react-motion. It inherits animated's powerful interpolations and performance, as well as react-motion's ease of use. But while animated is mostly imperative and react-motion mostly declarative, react-spring bridges both. You will be surprised how easy static data is cast into motion with small, explicit utility functions that don't necessarily affect how you form your views.

Build Status npm version Discord Shield Backers on Open Collective Sponsors on Open Collective

Installation

npm install react-spring

Try the beta for v9.0.0:

npm install [email protected]

Documentation and Examples

More info about the project can be found here.

Examples and tutorials can be found here.


Why springs and not durations

The principle you will be working with is called a spring, it does not have a defined curve or a set duration. In that it differs greatly from the animation you are probably used to. We think of animation in terms of time and curves, but that in itself causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that.

We are so used to time-based animation that we believe that struggle is normal, dealing with arbitrary curves, easings, time waterfalls, not to mention getting this all in sync. As Andy Matuschak (ex Apple UI-Kit developer) expressed it once: Animation APIs parameterized by duration and curve are fundamentally opposed to continuous, fluid interactivity.

Springs change that, animation becomes easy and approachable, everything you do looks and feels natural by default. For a detailed explanation watch this video.

What others say

Used by

And many others ...

Funding

If you like this project, please consider helping out. All contributions are welcome as well as donations to Opencollective, or in crypto:

BTC: 36fuguTPxGCNnYZSRdgdh6Ea94brCAjMbH

ETH: 0x6E3f79Ea1d0dcedeb33D3fC6c34d2B1f156F2682

You can also support this project by becoming a sponsor. Your logo will show up here with a link to your website.

Gold sponsors

Other Sponsors

Backers

Thank you to all our backers! 🙏

Contributors

This project exists thanks to all the people who contribute.

Comments
  • @react-spring/core or @react-spring/three production errors

    @react-spring/core or @react-spring/three production errors

    🐛 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"
    kind: bug 
    opened by kennetpostigo 93
  • v9.0.0-rc.3 –– Questions and feedback

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

    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 [email protected] -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

     

    opened by aleclarson 85
  • [RFC][documentation] What do you think?

    [RFC][documentation] What do you think?

    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!
    area: docs type: RFC 
    opened by joshuaellis 55
  • react-spring v6 importing parallax not working

    react-spring v6 importing parallax not working

    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'
    
    kind: bug area: react-native 
    opened by iammarkps 52
  • react-spring causes tsserver / typescript to lag multiple seconds

    react-spring causes tsserver / typescript to lag multiple seconds

    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

    type: help wanted area: typescript 
    opened by natew 47
  • 🚀 8.0.0 milestones (collecting ideas)

    🚀 8.0.0 milestones (collecting ideas)

    • [ ] 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.

    opened by drcmda 46
  • Feature Request: Typescript Support

    Feature Request: Typescript Support

    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 :-)

    kind: request type: good first issue 
    opened by thupi 46
  • v9.0.0

    v9.0.0

    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

    opened by aleclarson 43
  • CSP issue

    CSP issue

    🐛 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.

    kind: bug area: core 
    opened by phaistonian 38
  • Additional chart examples

    Additional chart examples

    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.

    opened by techniq 38
  • feat: useTransition rewrite

    feat: useTransition rewrite

    ⚠️ 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".

    opened by aleclarson 37
  • [feat]: three should extend the catalogue of r3f

    [feat]: three should extend the catalogue of r3f

    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

    kind: request area: three 
    opened by joshuaellis 0
  • [bug]: On onRest Callback, not really arrives stand-still

    [bug]: On onRest Callback, not really arrives stand-still

    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

    template: bug 
    opened by zm8 0
  • New Animate Number Demo

    New Animate Number Demo

    Why

    When I visited the react-spring site, I wanted to find a demo that showed me how I could animate a number.

    Brad Woods prepared this excellent demo series but his animated number demo only works for v8 and I wanted the latest v9.

    After googling, I stumbled upon this perfect react-spring blogpost by @eunit99 and basically took his approach with a few tweaks but most of the credit goes him.

    I realize you are planning to move to you new beta docs so I checked there as well and I believe demo could find a home there too. I could update the PR to include an update to the beta site.

    This is PR only considers the current live site though to keep the scope small and make sure its desirable.

    Screen Shot 2022-11-06 at 6 01 53 PM

    What

    I have added a new demo to show how we can animated numbers.

    Checklist

    • [x] Documentation updated
    • [x] Demo added
    • [x] Ready to be merged
    opened by headwinds 3
  • [bug]: useTransition not animating component on unmount

    [bug]: useTransition not animating component on unmount

    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

    template: bug 
    opened by dnorrstrand 1
  • [bug]: Parallax Layers sticky is a component, scroll to start position top calc error

    [bug]: Parallax Layers sticky is a component, scroll to start position top calc error

    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?

    Parallax Layers sticky is a component, scroll to start position top calc error

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

    To Reproduce

    see example

    Expected Behaviour

    work

    Link to repo

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

    template: bug 
    opened by reaink 1
Releases(v9.5.5)
  • v9.5.5(Sep 26, 2022)

    What's Changed

    • fix: remove infer S extends L by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1988

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.5.4...v9.5.5

    Source code(tar.gz)
    Source code(zip)
  • v9.5.5-beta.0(Sep 25, 2022)

    What's Changed

    • fix: remove infer S extends L by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1988

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.5.4...v9.5.5-beta.0

    Source code(tar.gz)
    Source code(zip)
  • v9.5.4(Sep 25, 2022)

  • v9.5.3(Sep 25, 2022)

    What's Changed

    • fix: Make decay easing respect the config.precision prop by @claytercek in https://github.com/pmndrs/react-spring/pull/1897
    • chore(docs): Update accessibility.mdx by @kooku0 in https://github.com/pmndrs/react-spring/pull/1965
    • chore: add react peer dependencies by @CharlesStover in https://github.com/pmndrs/react-spring/pull/1938
    • chore: use proper peer dependencies range condition by @eugenet8k in https://github.com/pmndrs/react-spring/pull/1971
    • fix: fixes for typescript 4.8 by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1979

    New Contributors

    • @claytercek made their first contribution in https://github.com/pmndrs/react-spring/pull/1897
    • @kooku0 made their first contribution in https://github.com/pmndrs/react-spring/pull/1965
    • @CharlesStover made their first contribution in https://github.com/pmndrs/react-spring/pull/1938
    • @eugenet8k made their first contribution in https://github.com/pmndrs/react-spring/pull/1971

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.5.2...v9.5.3

    Source code(tar.gz)
    Source code(zip)
  • v9.5.2(Jul 23, 2022)

    What's Changed

    • chore: remove yarn cache by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1945
    • fix: check if we have an internal ref to update by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1949

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.5.1...v9.5.2

    Source code(tar.gz)
    Source code(zip)
  • v9.5.1(Jul 21, 2022)

    What's Changed

    • chore: remove yarn cache by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1945
    • fix: useTransition would not obey refs by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1944

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.5.0...v9.5.1

    Source code(tar.gz)
    Source code(zip)
  • v9.5.0(Jul 13, 2022)

    What's Changed

    • docs: typo by @Deaponn in https://github.com/pmndrs/react-spring/pull/1900
    • fix: make children on AnimatedComponent optional by @LinusU in https://github.com/pmndrs/react-spring/pull/1925
    • feat: add useReducedMotion hook & export useIsomorphicLayout hook by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1886
    • fix: run stop function and don't flush the current queue by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1934

    New Contributors

    • @Deaponn made their first contribution in https://github.com/pmndrs/react-spring/pull/1900
    • @LinusU made their first contribution in https://github.com/pmndrs/react-spring/pull/1925

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.4.5...v9.5.0

    Source code(tar.gz)
    Source code(zip)
  • v9.4.5(May 4, 2022)

    What's Changed

    • Update CONTRIBUTING.md by @zidanehammouda in https://github.com/pmndrs/react-spring/pull/1865
    • refactor: fix link to repo dependents by @Fasani in https://github.com/pmndrs/react-spring/pull/1857
    • build(deps): bump next from 12.0.10 to 12.1.0 by @dependabot in https://github.com/pmndrs/react-spring/pull/1841
    • Links jump to section (part 2) + fix tarot images by @orta in https://github.com/pmndrs/react-spring/pull/1867
    • Official support for React18 incl StrictMode by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1875

    New Contributors

    • @zidanehammouda made their first contribution in https://github.com/pmndrs/react-spring/pull/1865
    • @orta made their first contribution in https://github.com/pmndrs/react-spring/pull/1867

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.4.4...v9.4.5

    Source code(tar.gz)
    Source code(zip)
  • v9.4.5-beta.1(Apr 14, 2022)

  • v9.4.5-beta.0(Apr 7, 2022)

    What's Changed

    • Update CONTRIBUTING.md by @zidanehammouda in https://github.com/pmndrs/react-spring/pull/1865
    • refactor: fix link to repo dependents by @Fasani in https://github.com/pmndrs/react-spring/pull/1857
    • build(deps): bump next from 12.0.10 to 12.1.0 by @dependabot in https://github.com/pmndrs/react-spring/pull/1841
    • Links jump to section (part 2) + fix tarot images by @orta in https://github.com/pmndrs/react-spring/pull/1867
    • Updates deps to work with react18
    • Fix bug with withAnimated fluid observer detatching

    New Contributors

    • @zidanehammouda made their first contribution in https://github.com/pmndrs/react-spring/pull/1865
    • @orta made their first contribution in https://github.com/pmndrs/react-spring/pull/1867

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.4.4...v9.4.5-beta.0

    Source code(tar.gz)
    Source code(zip)
  • v9.4.4(Mar 11, 2022)

    What's Changed

    • chore: edit MDX files for v2 by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1846
    • fix: link color by @Fasani in https://github.com/pmndrs/react-spring/pull/1849
    • Docs fixes by @bkrmadtya in https://github.com/pmndrs/react-spring/pull/1845
    • resolves #1855

    New Contributors

    • @Fasani made their first contribution in https://github.com/pmndrs/react-spring/pull/1849
    • @bkrmadtya made their first contribution in https://github.com/pmndrs/react-spring/pull/1845

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.4.3...v9.4.4

    Source code(tar.gz)
    Source code(zip)
  • v9.4.3(Mar 11, 2022)

    What's Changed

    • saw two grammatical errors & fixed 'em by @raidsrc in https://github.com/pmndrs/react-spring/pull/1812
    • Fix missing commas in api object by @chriscerie in https://github.com/pmndrs/react-spring/pull/1825

    New Contributors

    • @raidsrc made their first contribution in https://github.com/pmndrs/react-spring/pull/1812
    • @chriscerie made their first contribution in https://github.com/pmndrs/react-spring/pull/1825

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.4.2...v9.4.3

    Source code(tar.gz)
    Source code(zip)
  • v9.4.2(Jan 13, 2022)

  • v9.4.1(Jan 5, 2022)

  • v9.4.0(Jan 3, 2022)

    What's Changed

    • feat: add easing functions to react-spring by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1752
    • Feature/add container refs by @kindoflew in https://github.com/pmndrs/react-spring/pull/1771
    • feat: add exitBeforeEnter prop to useTransition by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1773
    • Update use-transition.mdx by @david-buck in https://github.com/pmndrs/react-spring/pull/1781
    • update readme to use the right rafz by @arzafran in https://github.com/pmndrs/react-spring/pull/1780
    • Chore/update dev tool by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1785
    • chore(docs): fix typo (correspend -> correspond) by @fk in https://github.com/pmndrs/react-spring/pull/1789
    • Stop RAF update loop when there are no pending tasks by @srubin in https://github.com/pmndrs/react-spring/pull/1786
    • fix: delay use transition by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1791
    • skipAnimation not working as expected with delay prop by @martyan in https://github.com/pmndrs/react-spring/pull/1783
    • feat: css variables by @joshuaellis in https://github.com/pmndrs/react-spring/pull/1798

    New Contributors

    • @david-buck made their first contribution in https://github.com/pmndrs/react-spring/pull/1781
    • @arzafran made their first contribution in https://github.com/pmndrs/react-spring/pull/1780
    • @fk made their first contribution in https://github.com/pmndrs/react-spring/pull/1789
    • @srubin made their first contribution in https://github.com/pmndrs/react-spring/pull/1786
    • @martyan made their first contribution in https://github.com/pmndrs/react-spring/pull/1783

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.3.1...v9.4.0

    Source code(tar.gz)
    Source code(zip)
  • v9.3.2(Dec 22, 2021)

    What's Changed

    • Update use-transition.mdx by @david-buck in https://github.com/pmndrs/react-spring/pull/1781
    • update readme to use the right rafz by @arzafran in https://github.com/pmndrs/react-spring/pull/1780
    • chore(docs): fix typo (correspend -> correspond) by @fk in https://github.com/pmndrs/react-spring/pull/1789
    • skipAnimation not working as expected with delay prop by @martyan in https://github.com/pmndrs/react-spring/pull/1783

    New Contributors

    • @david-buck made their first contribution in https://github.com/pmndrs/react-spring/pull/1781
    • @arzafran made their first contribution in https://github.com/pmndrs/react-spring/pull/1780
    • @fk made their first contribution in https://github.com/pmndrs/react-spring/pull/1789
    • @martyan made their first contribution in https://github.com/pmndrs/react-spring/pull/1783

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.3.1...v9.3.2

    Source code(tar.gz)
    Source code(zip)
  • v9.3.1(Nov 23, 2021)

    What's Changed

    • docs: Describe combining ref forwarding with animated by @gpoole in https://github.com/pmndrs/react-spring/pull/1734
    • Update README.md by @kabilanvennila in https://github.com/pmndrs/react-spring/pull/1748
    • Docs fix by @millsoper in https://github.com/pmndrs/react-spring/pull/1761
    • Remove ref to non-existent Code of Conduct from PR template by @millsoper in https://github.com/pmndrs/react-spring/pull/1764
    • fix: update overflow css property without mixing shorthand and non-shorthand properties by @Lucasdsk in https://github.com/pmndrs/react-spring/pull/1767
    • Use standard funding mechanism by @flying-sheep in https://github.com/pmndrs/react-spring/pull/1740

    New Contributors

    • @gpoole made their first contribution in https://github.com/pmndrs/react-spring/pull/1734
    • @kabilanvennila made their first contribution in https://github.com/pmndrs/react-spring/pull/1748
    • @millsoper made their first contribution in https://github.com/pmndrs/react-spring/pull/1761
    • @Lucasdsk made their first contribution in https://github.com/pmndrs/react-spring/pull/1767
    • @flying-sheep made their first contribution in https://github.com/pmndrs/react-spring/pull/1740

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.3.0...v9.3.1

    Source code(tar.gz)
    Source code(zip)
  • v9.3.0(Oct 10, 2021)

    What's Changed

    • fix: handle ParallaxLayers inside fragments (#1667) by @kindoflew in https://github.com/pmndrs/react-spring/pull/1671
    • fix(native): add children prop by @CodyJasonBennett in https://github.com/pmndrs/react-spring/pull/1705
    • feat: interpolate bare numbers with units by @CodyJasonBennett in https://github.com/pmndrs/react-spring/pull/1473

    Full Changelog: https://github.com/pmndrs/react-spring/compare/v9.2.6...v9.3.0

    Source code(tar.gz)
    Source code(zip)
  • v9.2.6(Oct 6, 2021)

    Fixes

    • useChain does not run hooks in sequence when duration is specified #1492
    • useSpring does not orchestrate animations if one is using config w/o duration, when others do #1584
    • Type inference failed with functions passed to useSpring etc.
    Source code(tar.gz)
    Source code(zip)
  • v9.2.5(Oct 3, 2021)

  • v9.2.4(Jul 13, 2021)

    Fixes

    • Animated should not try to access Array.prototype (#1585)
    • Add immediate to payload in useTransition hook (#1600)
    • useSprings controller clear refs properly when length changes in React.StrictMode (#1597)
    Source code(tar.gz)
    Source code(zip)
  • v9.2.3(Jun 9, 2021)

  • v9.2.2(Jun 7, 2021)

    Features

    • NEW package @react-spring/rafz (a fork of the pmndrs library rafz) – did not constitute minor bump.

    Fixes

    • Three – Array props were not been updated correctly, big thanks @midanosi! (#1430)
    • Three – XR session was breaking Springs, big thanks @ffdead (#1518)

    Chores

    • update the yarn.lock with updated packages
    Source code(tar.gz)
    Source code(zip)
  • v9.2.1(May 28, 2021)

  • v9.2.0(May 27, 2021)

    Features

    • Parallax – Sticky!! Thanks to @kindoflew (#619)
    • POTENTIALLY_BREAKING_CHANGE Parallax – child horizontal prop defaults to parent's (#1458)

    Fixes

    • Parallax – scrollTo gets correct scroll value (#1455)
    • Core – SpringValue would jump to to value at end of decay (#1437)
    • Core – SpringValue wouldn't animate after immediate value has been changed (#1026)
    • useTransition – useTransition wasn't passing it's ref (#1453)
    • useTransition – Delay prop wasn't being added to the trail delay caused by the trail prop (#1099)
    • Core – Springs sometimes return undefined (#1096)
    • POTENTIALLY_BREAKING_CHANGE SpringRef – has been re-written as a function resolving (#1423)

    Chores

    • repo now uses preconstruct and changesets
    • recrawl has been removed from repo due to lack of windows support
    • support [email protected] in peer deps (#1478)
    Source code(tar.gz)
    Source code(zip)
  • v9.2.0-beta.7(May 27, 2021)

  • v9.2.0-beta.6(May 17, 2021)

  • v9.2.0-beta.5(May 17, 2021)

  • v9.2.0-beta.4(May 10, 2021)

    Fixes

    • useTransition – useTransition wasn't passing it's ref (#1453)
    • useTransition – Delay prop wasn't being added to the trail delay caused by the trail prop (#1099)

    Chores

    • Edit Licenses
    Source code(tar.gz)
    Source code(zip)
  • v9.2.0-beta.3(May 10, 2021)

✌️ A spring physics based React animation library

react-spring is a spring-physics based animation library that should cover most of your UI related animation needs. It gives you tools flexible enough

Poimandres 24.5k Dec 2, 2022
A lightweight (2kB) spring animation library for React

Spring animations in React & Typescript. Zero dependencies and lightweight (2kb). A simple alternative to libraries like framer-motion (~50kB) and react-spring (~20kB).

Ross Zurowski 7 Sep 10, 2022
A spring that solves your animation problems.

React-Motion import {Motion, spring} from 'react-motion'; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div

Cheng Lou 21.3k Nov 30, 2022
A spring that solves your animation problems.

A spring that solves your animation problems.

Cheng Lou 20.4k Nov 23, 2021
WeDelivery - A Spring and React based dispatch & delivery management application.

WeDelivery WeDelivery is a Spring and React based dispatch & delivery management application. Our service is to use robots and drones to help users in

Leluth 6 Nov 12, 2022
React App with games using animations (react-spring)

Teddy games https://pylnata.github.io/teddy/ React App with cartoon animations and games for kids. Developed just for fun and to learn React-spring li

Nataliia Pylypenko 153 Nov 25, 2022
Project build: REACT CREATE APP / REDUX / REDUX-TOOLKIT / REACT-SPRING / SCSS

This project was bootstrapped with Create React App, using the Redux and Redux Toolkit template. designed by Om Arya Available Scripts In the project

Discord: Fpsska#1531 1 Aug 2, 2022
High-performance spring animations in React

React Rebound A spring-based React animation library that animates elements directly in the DOM for maximum performance. Hooks and component-based API

Stefano J. Attardi 132 Nov 11, 2022
📷 A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.

react-spring-lightbox React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations. Doc

Tim Ellenberger 165 Nov 24, 2022
This application contains end to end non blocking reactive flow. From Bankend( Database, Spring) and FrontEnd Angular

SpringReactiveApp This application has following projects Spring boot reactive with Mongo Database Angular with EventSource for reactive(non-blocking

null 1 Oct 26, 2021
react-animated-numbers - 👾 Library showing animation of number changes in react.js

react-animated-numbers - ?? Library showing animation of number changes in react.js

Yeongsu Han 139 Nov 28, 2022
(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

react-anime (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js. Just place an <Anime> component and what

HyperFuse 1.5k Dec 3, 2022
Open source, production-ready animation and gesture library for React

An open source and production-ready motion library for React on the web. Motion is an open source, production-ready library that's designed for all cr

Framer 16.7k Dec 3, 2022
✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!

(ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React built on top of Julian Garnier's anime.js.

plus1.tv 1.5k Nov 29, 2022
🎰 Library showing animation of number changes in react-native

react-native-animated-numbers Library showing animation of number changes in react-native If you want web version in react.js download react-animated-

ZERO (Yeongsu Han) 202 Nov 28, 2022
SimpleReveal - A simple scroll animation library in React

SimpleReveal A simple scroll animation library in React Zero-dependency No additional DOM element Simple and predictable API SSR Support (Next.js, Gat

당근마켓 18 Nov 8, 2022
A small but powerful animation library for React, built on Web Animations API

A small but powerful animation library for React, built on Web Animations API

null 11 Nov 29, 2022
A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance

A wrapper over Motion One, An animation library, built on the Web Animations API for the smallest filesize and the fastest performance. Works with solid-js

Tanvesh Sarve 44 Nov 2, 2022
React components for the Web Animations API - http://react-web-animation.surge.sh

react-web-animation react-web-animation is a set of React components that expose the Web Animations API in a declarative way. Demos Check out how you

Charles King 294 Dec 2, 2022