Giter VIP home page Giter VIP logo

react-spring's Introduction


react-spring

A spring-physics first animation library
giving you flexible tools to confidently cast your ideas


Chat on Discord


react-spring is a cross-platform spring-physics first animation library.

It's as simple as:

const styles = useSpring({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

<animated.div style={styles} />

Just a small bit about us:

  • Cross-Platform: We support react-dom, react-native, react-three-fiber, react-konva & react-zdog.
  • Versatile: Be declarative with your animations or if you prefer, imperative.
  • Spring-Physics First: By default animation use springs for fluid interactivity, but we support durations with easings as well.

There's a lot more to be had! Give it a try and find out.

Getting Started

⚡️ Jump Start

# Install the entire library
npm install react-spring
# or just install your specific target (recommended)
npm install @react-spring/web
import { animated, useSpring } from '@react-spring/web'

const FadeIn = ({ isVisible, children }) => {
  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 24,
  })

  return <animated.div style={styles}>{children}</animated.div>
}

It's as simple as that to create scroll-in animations when value of isVisible is toggled.

📖 Documentation and Examples

More documentation on the project can be found here.

Pages contain their own examples which you can check out there, or open in codesandbox for a more in-depth view!


📣 What others say

Used by

And many others...

Backers

Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our Opencollective.

Contributors

This project exists thanks to all the people who contribute.

react-spring's People

Contributors

aleclarson avatar andarist avatar brunolemos avatar cdebotton avatar chanceeakin avatar chenesan avatar codyjasonbennett avatar dbismut avatar dependabot[bot] avatar drcmda avatar elindorath avatar gforrest-bw avatar jacobrask avatar jessidhia avatar jigsawye avatar joshuaellis avatar kindoflew avatar leonascimento avatar malwilley avatar mvasin avatar omung avatar ooloth avatar precociouslydigital avatar renovate[bot] avatar ruggedy avatar salguerooo avatar stephencorwin avatar trysound avatar vlazh avatar wilcoschoneveld avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-spring's Issues

height: 'auto' calculates incorrect height for some elements

Hi again! Looks like the height calculation in fixAuto is not ending up with the right height for some elements.

I've noticed that it happens with elements who have text that wraps and makes the height larger than it would otherwise be. Increasing the width of those elements to the point where the text no longer wraps results in the row being the correct height.

I have a suspicion that this is due to using clientHeight, which has bitten us a fair amount as well. We usually use getBoundingClientRect().height these days - might be worth a look!

Example:

screen shot 2018-04-30 at 3 43 25 pm

Trail: configure delay between items

Love the library. Small feature request!

Trails would be greatly enhanced with a prop to configure delay between items. Ideally perhaps optionally taking an array that lets you have different delays for each item, or a single number for all.

Browser support?

I can't find anything in the documentation about browser support.
I tested a trail animation in crossbrowsertesting and got the following error on iphone ios, but also on older chrome versions on android:

image

Could I get a little bit more insight on browser support, or any advice to fix this?

Transition leave has undefined as first argument

I just started a new project with create-react-app and included the tree example without changes. When a node is clicked everything works as expected but every time you try to collapse a node this error pops up:

Uncaught TypeError: Cannot read property 'source' of undefined

This error occurs because the leave prop of the Transition component has undefined as first argument. This happens only with react-spring version >= 5.0.1 (5.0.0 is fine).

Repro:

https://github.com/andtos90/react-spring-onleave-bug with react-spring 5.1.0

FLIP-style animations

Discussed briefly in #5 (comment), but it would be nice if react-spring could calculate the to/from states if not explicitly provided, similar to react-flip-move which uses the FLIP technique (ultimately getBoundingClientRect)

For example, in react-move you can do this (just by changing the class/styles on the items, they "react")

<FlipMove className="items"
  duration={350}
  staggerDurationBy={20}
  staggerDelayBy={20}
>
  {items.map(item => (
    <div
      className={item.key === selected ? "item selected" : "item"}
      onClick={() => this.selectItem(item.key)}
      key={item.key}>{item.key}</div>
  ))}
</FlipMove>

Here is the discussion I had with the author of react-flip-move while creating this - joshwcomeau/react-flip-move#69

A similar thing could probably be done like react-morph which is useful to morph shared elements between route states (like Android does a good bit with it's material design

Maybe if you do not provide a from/to to <Transition> it calculates the top/left/width/height automatically (or just diffs the styles and lets the spring transitions them). With flip you apply them, capture the styles, then invert them.

Anyways, I don't have any specific need right now, but thought it was worth having a conversation. Thanks again for the awesome library.

Feature Request: auto as height

I was reading the documentation and I couldn't find a way to set auto as enter height prop, as you can see in this example:

<Transition
    keys={items.map(item => item.key)}
    from={{ opacity: 0, height: 0 }}
    enter={{ opacity: 1, height: 'auto }}
    leave={{ opacity: 0, height: 0 }}>
    {items.map(item => styles => <li style={styles}>{item.text}</li>)}
</Transition>

I think that will make easier to add elements as children without worring the height of those elements.
If it helps you there is another component, that can do that https://github.com/Stanko/react-animate-height

Nested routes

How would one go about having nested routes, whereas the first stage route (e.g. /users) triggers a transition where a navigation component and some content is shown. But once the user clicks on the navigation to go to a nested route, merely the content is transitioning.

I've tried multiple things, but whatever I do; the upper route changes too and thus the entire page keeps transitioning while I only want the nested part to transition. I'm pretty sure this happens due to my router configuration, but I cannot seem to figure out why.

Two component playing one by one and last one stays

import React, { Component } from "react";
import { AnimationSequence, Animatable } from 'react-web-animation';

export default class profile extends Component {

  constructor() {
        super();
        this.state = {
            currentTime: 0,
            playState: 'running'
        };
        this.isRemovable = false ;
    }

    getKeyFrames() {
        return [
            { transform: 'scale(1)',    opacity: 0,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0,   offset: 1 }
        ];
    }

    getKeyFrames1() {
        return [
            { transform: 'scale(.1)',    opacity: 0,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0.6,   offset: 1 }
        ];
    }


    getTiming( duration ) {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 1,
            direction: 'alternate',
            fill: 'forwards'
        };
    }

 render() {
  return(
  <div className="page_profile">
  <AnimationSequence
           playState={this.state.playState}
           currentTime={this.state.currentTime}
         >
         <Animatable.div
                   id="1"
                   keyframes={this.getKeyFrames()}
                   timing={this.getTiming(2000)}

                 >
      <h1>Profile</h1>
        <p>Hello from the profile page!</p>

        </Animatable.div>
                <Animatable.div
                  id="2"
                  keyframes={this.getKeyFrames1()}
                  timing={this.getTiming(4000)}
                  style={{opacity:0}}
                >

        <h1>Profile 2</h1>
        <p>Goodbye from the profile page!</p>

        </Animatable.div>

           </AnimationSequence>

  </div>
  );
 }
}

Hi Paul, I would like to ask how can I acieve that two component appears one by one then the last one stays on screen? Above is code I wrote with react-web-animation, could you tell me how to achieve the effect I said with React-spring? As I want the first component to unmount before the second one appears. Thanks, and please excuse my simple problem as I am new to coding.

Feature request - Allow optionally setting duration based easings

Per our spectrum conversation:

I’m attempting to create a continuous sine wave animation. I’ve gotten pretty close with https://codesandbox.io/s/lx5nvqz6pq but noticed that the animation pauses between keyframes, likely due to friction deceleration. Would it make sense to optionally allow users to specify a duration-based easing for these kinds of zero-delay, linear, continuous animations?

(FYI - my initial approach was a Trail based animation similar to https://codesandbox.io/s/q9lozyymr9 but I needed the first element to continue along the sine wave before the last element finished animating, and even then each element’s animation would be affected by the preceding element so the amplitude of the sine wave would decrease the further they were from the first element.)

Thanks again for this delightful library!

Animate mount/unmount?

I'd like to animate a single element that mounts/unmounts, what's the suggested way to handle this case?

I tried with Transition but it seems to like only 2 or more elements.

Thanks.

Interpolating curved paths

Interpolating the following gives a 'Uncaught TypeError: Cannot read property 'push' of undefined':

const toggledPathCurved = "M0.9,19c-9.2,0,56.5,0,48.4,0C34.3,19,32,0.6,25.1,0.6S12.4,19,0.9,19z";
const disabledPathCurved = "M0.9,38c-9.2,0,56.5,0,48.4,0c-15,0-17.4,0-24.3,0S12.4,38,0.9,38z";

While these paths work fine:

const toggledPathSimple = "M20,380 L380,380 L380,380 Z";
const disabledPathSimple = "M20,20 L20,380 L380,380 Z";

I'm guessing it has to do with the curves.

Refs in Parallax Example

Nothing major. React 16.3 just deprecated string refs in favor of the callback refs API ref={el => this.el = el} or the new createRef API el = React.createRef(); with ref={this.el}.

The parallax example could be updated with either:

callback ref API

class App extends React.Component {
  scroll = to => this.parallax.scrollTo(to)
  render() {
    return (
      <Parallax className="container" ref={parallax => this.parallax = parallax} pages={3} horizontal scrolling={false}>

createRef API

class App extends React.Component {
  parallax = React.createRef();
  scroll = to => this.parallax.current.scrollTo(to);
  render() {
    return (
      <Parallax className="container" ref={this.parallax} pages={3} horizontal scrolling={false}>

I’m enjoying learning with the docs and examples 🙂

v4.1.3 route transitioning does not remove previous DOM nodes

Hi there, thanks so much for your work on this library.

In your React Router example after a transition is complete the old DOM node is removed (which is correct behavior); https://codesandbox.io/embed/xo0lrqw2nz

In this example if I upgrade the library version to v4.1.3 (which is the latest version at time of writing) I notice the previous DOM nodes no longer get removed as they should. Here's my fork with the only difference being the version number: https://codesandbox.io/s/yv2458ljxv

Suggestion: Documentation needs work

Suggestions - -

Your project is great, but you need more simple examples as your risking overwhelming users with too much information. I'm glad react-spring is so flexible but the documentation needs to start minimal. A simple spring or slide in effect would be a much better example. Start users small and gradually build them up to more complex components. I think making these change would make your framework ease adoption.

On Animation Finish Callback

Hey, I was wondering if there's a way to have a callback on the animation finishing. I'm trying to implement a form that animates new elements in, then scrolls down. However, I need to have a way of detecting when the form is finished animating to start the scroll. I saw that there's an onRest prop in Transition, but that appears to freeze up the animation when I use it.

Thanks,
Nicholas

Add Trail to typescript !

This is just a simpler question about the typescript implementation for some of your feature like the Trail class... Add this class in your typescript still in your road map ?
Thx in advance. And a big thx for this package...

Example for tension and friction config

Are tension and friction the same as stiffness and dampening? It would be neat to have an example like react-motion to demonstrate the attributes.

image

In addition to the grid from that example, it may be nice to have a separate row for the pre-defined settings: default, gentle, wobbly, stiff, slow.

Unfortunately, I will be unable to try making the example until the semester ends (that, and I am still wrapping my head around how react-spring works).


Also, one other question, is it possible to set your own defaults for the config without having to pass the config object to the react-spring components every time? (similar to how you can create a custom instance of axios)

Interrupting CSS transition in progress causes duplication of transition target

I noticed that during a transition, if the transition is reversed due to a UI interaction before it can be completed, it causes strange DOM issues.

For example, in the demo below, if you press "toggle" to show the form but then quickly press the hide button before the transition can complete, it will duplicate the DOM element. The expected behavior should be that if the transition is interrupted or changed before it can be completed, it should not cause a duplicate DOM element as seen in the screenshot below.

chrome_2018-04-18_23-09-41

Demo: https://codesandbox.io/s/w70169q88w

Spring config for individual value

In react-motion I can use different spring wrappers for different values, which comes quite handy for controlling values for other components to animate. It seems that react-spring can only set config to the component. Will there be support for this? Or is there a better/idiomatic way to achieve this with react-spring?

My use case: I have an icon that may translate and scale. When it mounts, it translates immediately to the position and scales wobbly to 1; otherwise it just translates gently to the cursor position.

Here is a simple example with react-motion: https://jsfiddle.net/straybugs/0cxobcut/

Multi-stage transitions

Not sure how this would work with spring-based animations, but it would be useful to be able to have multi-stage transitions. For example, to replicate this, you:

  • animating the leaving items first
  • update the existing items
  • animate in the new items

Looking at the source, react-move (previously known as resonance) does it with delays and passing arrays to enter/update/leave. I don't know if react-spring could take in arrays as well and provide timings, or maybe explicitly specify the order of the lifecycle methods and waits for one to finish before starting the next:

<Transition
  enter={...}
  update={...}
  leave={...}
  order={'leave','update','enter'}
>
</Transition>

I don't know if this would be a good API (and work), but just another use case to think about.

Altering Arc Animation Errors

In animating a change of path that involved an arc, it appears that the arc changing the large-arc flag from 0 to 1 or vice versa causes problems as the browser attempts to render decimal values:

Is there a way I can tell it to just flip from 0 to 1 at the halfway mark? Once it reaches 1 or 0 it renders fine, its just the transition.

react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…98 A 160 160 0 0.002050046856617…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…93 A 160 160 0 0.001723949084852…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…33 A 160 160 0 0.001479574213010…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…31 A 160 160 0 0.001231605338725…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…05 A 160 160 0 0.001046304425757…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…08 A 160 160 0 0.000879870421927…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…47 A 160 160 0 0.000628588289482…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…06 A 160 160 0 0.000534014347596…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…44 A 160 160 0 0.000377636839004…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…18 A 160 160 0 0.000317566739405…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…14 A 160 160 0 0.000264344238383…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…22 A 160 160 0 0.000222295428390…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…45 A 160 160 0 0.000192738596108…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…06 A 160 160 0 0.000160436614413…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…79 A 160 160 0 0.000134916217643…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…65 A 160 160 0 0.000114617426763…".
react-dom.development.js:2691 Error: attribute d: Expected arc flag ('0' or '1'), "…18 A 160 160 0 0.000094440800089…".

react-native support?

Hi, thanks for the library, the demos look fantastic.

We plan on building cross-platform components and are looking at animating solutions. Would it be feasible for this project to support react-native? Do you have ideas for an approach? Would you be interested in PRs towards this?

Thanks

react-spring.es.js?1586:2126 Uncaught (in promise) TypeError: __WEBPACK_IMPORTED_MODULE_4_react___default.a.createContext is not a function

it showing me following error: react-spring.es.js?1586:2126 Uncaught (in promise) TypeError: __WEBPACK_IMPORTED_MODULE_4_react___default.a.createContext is not a function.

Here is my code:


<Transition
native
config={{ tension: 1, friction: 10 }}
keys={location.pathname.split('/').filter(a => a)[0]}
from={{ transform: 'translateY(500px)', opacity: 0 }}
enter={{ transform: 'translateY(0px)', opacity: 1 }}
leave={{ transform: 'translateY(500px)', opacity: 0 }}>
{style => (




)}

    </ErrorBoundary>
  </Router>

Non minified esm bundle

atlassian/react-beautiful-dnd#437 is discussing moving that library to react-spring, but looks like a non-minified esm bundle is of interest for debugging purposes.

I'm a third party, but when using react-spring and it would be great if a higher level library like react-beautiful-dnd was useable without bringing in another animation library.

tiny import issue in one of the example demos

I just wanted to check out the animation and ran accross this issue while compiling

ERROR in ./demos/sunburst/index.js
Module not found: Error: Can't resolve './Partition' in '.../react-spring/examples/demos/sunburst'
 @ ./demos/sunburst/index.js 10:0-36 101:27-36
 @ ./demos lazy ^\.\/.*$ namespace object
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 index.js
 「wdm」: Failed to compile.

It's basically just a typo in this import from Sunburst demo:
import Partition from './Partition'

Uppercase instead of the lowercase P in ... from './Partition'

Mapping an array for Trail throws an error

Hey guys,

First off, loved what you guys are doing with Spring. Looks very very promising! Now to the issue (☹️), I went through the examples and found Trail most suitable for my purpose.

My code for the Trail component is something like this:

import React, { Component } from 'react';
import { Trail, config, animated, template } from 'react-spring';

import MoreInfo from '../../MoreInfo';
import RevenueBlock from './blocks/RevenueBlock';
import StatsBlock from './blocks/StatsBlock';

export default class TrailingComponent extends Component {
    state = {
        blocks: ['item-1', 'item-2', 'item-3']
    };

    getBlock = number => {
        switch (number) {
            case 1: {
                return <RevenueBlock />;
            }

            case 2: {
                return <MoreInfo />;
            }

            case 3: {
                return <StatsBlock />;
            }
        }
    };

    render() {
        const { blocks } = this.state;

        return (
            <div>
                <Trail
                    native
                    config={config.gentle}
                    from={{ opacity: 0, x: 100 }}
                    to={{ opacity: 1, x: 0 }}
                    keys={blocks.map(block => block)}
                >
                    {blocks.map((graph, index) => ({ x, opacity }) =>
                        <animated.div
                            style={{
                                opacity,
                                transform: template`translate3d(${x}%,0,0)`
                            }}
                        >
                            {this.getBlock(index + 1)}
                        </animated.div>
                    )}
                </Trail>
            </div>
        );
    }
}

The three blocks (Revenue, MoreInfo, Stats) are just div with nothing fancy in them.

Whenever TrailingComponent mounts, I get this error:
A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
image

Can you guys help me out on what I'm missing here?

Combine multiple animated values

Let's say you wanted to drag left and right and interpolate a rotation from the deltaX. Using .interpolate({ map: Math.abs, range: [0, 300], output: [0, 90], extrapolate: 'clamp' }) could work for the rotation, but how do you interpolate both a rotation value and a translate value from the same source.

Using https://codesandbox.io/s/74l3qwjv2j I'm looking to interpolate the rotate value from the X value but separately from the actual X position.

Unmount after transition.

Hi. First of all Thank you for the awesome library!
I'm trying to make notification list with <Transition>.
https://codesandbox.io/s/6v4xqkmlmk
This is my sample code. What i'm tying to do is,

  1. Push notification component to the this.state.notifications, when button is clicked.
  2. Remove notification after timeout or has been clicked.

So, enter and leave props working correctly. Opacity is set 0 to 1 when Enter, 1 to 0 when Leave.
But my problem is, when component has removed by click or timeout, it still exist in Dom.
I must update state( change value on input, remove other component ...) to actually remove this component.

Did i miss something..?

"auto" value does not work with react-router (or any other context-based APIs)

Since the addition of "auto", any components rendered inside of a Spring that uses 'auto' as a value do not receive the "router" context, resulting in bugs:

screen shot 2018-04-17 at 4 38 23 pm

screen shot 2018-04-17 at 4 39 21 pm

This is likely due to the psuedo-portal approach of the fixAuto file.

I have a suspicion that this is due to not using ReactDOM.render instead of ReactDOM.createPortal (the latter preserves context). Any other ideas? Happy to help with a fix, just need to figure out what direction we'd want to go in.

Animation duration?

Great library, but when using Transition w/ Animated is there a way to control the duration?

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

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

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.

Transition Events

Hello there! First of all thanks for this great library. As an enhancement I would suggest events for the different states of Transition (enter-start, enter-frame, enter-rest and so on). Or is this something, that has to be solved by Keyframes?

Usage with react-router v4

This library looks awesome!

Has this been tested with react-router v4 for route based transitions? It would be awesome if the docs included an example for this use case!

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

Update readme on how to use react-spring with react-router

There is a section in readme called "Parallax and page transitions", that contains some guidance on parallax, but not about page transitions, at least not in react-router terms.

I'd love to find out out how to use react-spring and react-router together, and have readme updated on that.

import { Spring } from 'react-spring' collapses my react application

Dependencies
"react": "^15.6.0",
"react-spring": "^5.0.1",

Just the import of 'react-spring'
import { Spring } from 'react-spring'
and react renders nothing with the
<div id='root' ></div> empty.
If i comment the import line, everything becomes Ok.
I find it strange. And no error is reported.

browser export config

Congrats on a great project!

I am not a rollup user and i am trying to setup the build to export a browser consumable file ( with React exclusions etc...) for lazy loading in a non webpack/rollup builder environment...

any pointers or docs on how to do this with react-spring?

template object for native springs

Trying to get a native Spring to work, and came across import {template} from 'react-spring in some of the examples. But there is nothing called template inside the project, and trying to import it just returns undefined. Is it an old outdated value? If so what should you do instead?

Example: https://codesandbox.io/embed/vvmv6x01l5

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.