pmndrs / react-spring Goto Github PK
View Code? Open in Web Editor NEW✌️ A spring physics based React animation library
Home Page: http://www.react-spring.dev/
License: MIT License
✌️ A spring physics based React animation library
Home Page: http://www.react-spring.dev/
License: MIT License
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/
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.
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
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).
https://github.com/andtos90/react-spring-onleave-bug with react-spring 5.1.0
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...
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.
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?
Repro:
Nice lib! =D
Is it possible with this library to make a hover/mouseover based parallax effect similar to this example http://matthew.wagerfield.com/parallax/
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.
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.
Great library, but when using Transition w/ Animated is there a way to control the duration?
Hey there,
I was trying to add react-popper to use it with react-spring, but with versions higher than 4.0.1 i'm getting errors Encountered two children with the same key
I've put it in codesandbox, popper isn't working correctly, but it's enough.
Just click multiple times on Open
and you will see lots of warnings in console.
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!
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.
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.
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:
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.
Hey, I found an issue that was introduced in v4.0.2 in Transition.js
Working example: https://codesandbox.io/s/2jo121296p (v4.0.1)
Example with issue: https://codesandbox.io/s/1rv0w62rkj (v4.0.2+)
On both examples click fast on the green body. In the working example the animation goes in one direction, in the one with the issue, the animation goes in both directions.
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.
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)
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 😄).
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.
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.
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!
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.
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.
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>
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:
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.
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
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'
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…".
Maybe reuse some of the code from Facebook Keyframes After Effects exporter:
https://github.com/facebookincubator/Keyframes/tree/master/scripts
https://github.com/facebookincubator/Keyframes/blob/master/js/src/AECompToKeyframesAnimation.js
Or maybe use the Lottie stuff instead.
http://airbnb.io/lottie/
https://aescripts.com/bodymovin/
(I'm not as familiar with how Bodymovin works)
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?
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 :-)
onFrame
works, but onRest
is never called when using <Transition />
.
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
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.
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.
Hey guys,
First off, loved what you guys are doing with Spring. Looks very very promising! Now to the issue (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.
Can you guys help me out on what I'm missing here?
https://codesandbox.io/embed/548lqnmk6l
this online demo is not same as gif, and the online demo look like bug.
Hi!
When attempting to pass props down to child components of Transition as shown in this sandbox here:
https://codesandbox.io/s/1qyokz1j3j
There seems to be some issues.
Is this the correct way of doing it or have I misunderstood something?
Btw great work on the library, I really love the simple and straighforward API!
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.
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.
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 🙂
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?
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:
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,
this.state.notifications
, when button is 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..?
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
The Keyframes/single script demo from the examples section does not animate background property, when React
and react-spring
are updated to ^16.3.1
and 5.1.1
versions respectively. Can be reproduced here, on a forked sandbox.
Repro:
I've made a small sandbox here: https://k0row0vkvv.codesandbox.io/
Basically all the ideas and tests that came up over the last month, but the colors and all, it bites. If anyone could help out it would be greatly appreciated. It doesn't have to be a fancy webpage - would be very happy it wouldn't cause eye-strain for starters.
Full repo is here: https://github.com/drcmda/react-spring/tree/master/examples
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.