Comments (4)
@NicholasLYang onRest should do it actually. If something freezes that would be quite bad, would you like to make a codesandbox for it?
Another way would be to attempt using the Keyframes api:
basic example: https://codesandbox.io/embed/j1w4355593
two animated elements working together: https://codesandbox.io/embed/zl35mrkqmm
Human interaction: https://codesandbox.io/s/xjxpo462o4
With this you can await animations, chain and delay them. It's still super experimental at this point, and i haven't figured out a way to abort once you set stuff in motion, but if you don't switch primitives or do any other wild stuff, it could be fine.
Would still be interested in fixing onRest if there's a problem with it.
from react-spring.
I though about this some more and maybe i was wrong, Transition doesn't have a beginning and an end, it just reacts to random lifecycle changes. onRest in Transition wouldn't make much sense, unless it fires just out of the blue. Trail on the other hand could do that.
from react-spring.
Closing this for now, if you need further help i'll re-open
from react-spring.
If you have multiple animations in your useSpring, you can use the onRest "finished" property:
useSpring({
from: {
...
},
to: [
{
...
},
{
...
},
],
onRest: (e) => {
if (e.finished === true) {
console.error("Animation finished");
}
},
});`
from react-spring.
Related Issues (20)
- [bug]: When included in a module, react-spring resolves to the string "/static/media/react-spring_web.development.34d7028f586cc8ee5e8e.cjs" HOT 2
- why require('react-spring') returns string instead of object HOT 1
- [bug]: @react-spring/konva + typescript HOT 3
- [bug]: Noise demo page - CodeSandbox still using 9.5.5 version
- [feat]: Integration of Tailwind CSS with React Spring for Declarative and Styled Animations
- [bug]: Wrong source-maps
- [bug]: ./node_modules/@react-spring/shared/dist/react-spring_shared.legacy-esm.js 1023:7 HOT 3
- [bug]: update transform
- [bug]: react-spring Identifier 'React' has already been declared HOT 3
- [bug]: Incorrect tooltips in useTransition docs HOT 1
- [bug]: React-Spring.dev main website down HOT 1
- [bug]: useResize is jumpy
- [bug]: The leave option in config object behaves inconsistently when using useTransition HOT 1
- [bug]: Website with docs not working in chrome (120.0.6099.72) HOT 3
- [bug]: Documentation website is broken after the first visit on most desktop browser HOT 8
- [bug]: libc++abi: terminating with uncaught exception of type std::__1::system_error: mutex lock failed: Invalid argument HOT 1
- [bug]: It’s the same problem. There is no CSS style when visiting the website. HOT 1
- [bug]: Animation did not run when using useSpring in next 14 Dev Mode. HOT 1
- [bug]: styles are not updated when using useSprings in conjunction with deleting items from a list HOT 1
- [bug]: `Dynamic require of "react-native" is not supported` on react native web
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spring.