berzniz / react-overdrive Goto Github PK
View Code? Open in Web Editor NEWSuper easy magic-move transitions for React apps
Home Page: https://react-overdrive.now.sh
License: MIT License
Super easy magic-move transitions for React apps
Home Page: https://react-overdrive.now.sh
License: MIT License
Seems like https://zeit.co/berzniz/react-overdrive-react-router-v4-demo/zketptspxf?redirect=1 and https://zeit.co/berzniz/react-overdrive-react-router-v4-demo/zketptspxf?redirect=1 are broken.
at least for me.
Cool to see 0.0.5 launched! However, because we don't have a CHANGELOG or a using releases, I don't know what was added
Similar to <ReactCSSTransitionGroup>
there could be a component
prop and className
prop to customise what will wrap the children provided to Overdrive. Otherwise it is quite easy to break layout with an unexpected <div>
.
Add support for react 15 and don't use unstable method
Downloading the code, npm install is successful but npm start generates an error npm ERR! missing script: start. Looking in package.json at scripts listed, there is "standard" but npm run standard just generates an error. Any idea how to fix this?
Thanks,
Rob
I transition an image into a headline.
class App extends Component {
constructor() {
super();
this.state = {
loading: true
};
}
componentDidMount() {
setTimeout(() => {
this.setState({loading: false});
}, 2000);
}
render() {
return (
<div className="App">
<div className="App-header">
{this.state.loading && <Overdrive id="content"><img src={logo} className="App-logo" alt="logo" /></Overdrive>}
{!this.state.loading && <Overdrive id="content"><h2>React-Overdrive Test</h2></Overdrive>}
</div>
</div>
);
}
}
The basis is the default create-react-app setup: https://github.com/joetm/overdrive-test
What I notice is that the style of the headline is not applied immediately.
I see the headline appear with black text left-aligned. Then it jumps to being center-aligned with white text.
Anything that can be done in this case?
Hi! Do you think it might be more React™ To use refs instead of ids?
First of all, thanks for the great library!
Though I was a little confused why the website has a different, nextjs
demo than the repo. I think the nextgram
one is better!
I have a demo here https://codesandbox.io/s/morning-waterfall-6brec?file=/src/App.js
click the blue box to have it move back and forth between parent elements.
Is there a way to get a smooth animation here?
Hi @berzniz
Thank you for this awesome component: simple as saying hello but so powerful results!
In the context of this module, there are some use cases where it would be important to have an onAnimationEnd prop in the API.
For example, when considering an action on componentDidMound that causes a new render invocation, if the animation provided by react-overdrive has not finished yet, it is broken by the new render invocation.
It would be worthwhile to consider adding this prop event to the API provided 😄 .
Are there similar libraries out there that you could recommend for non React projects? (Plain HTML/CSS/JS)
Thanks
This is great!
Is there a way to instead do a fade transition? For example, on the react-router example, instead of transforming the page into the next one, it would just fade out old page and fade in new page.
Hello, I was experimenting with this (very cool) library trying to do some slightly more complex animations and ran into some issues with duplicate nested elements. Here's a demo of the problem I encountered.
I was able to achieve an effect closer to what I wanted (the "animation with hacked overdrive" tab in the example) by editing react-overdrive to expose a new "animationStart" prop function that hands the ref of the source and target cloned elements to the outer react element, which can use DOM methods on the content of the cloned elements while the outer overdrive animation is in progress. A messy, non-pull-request-ready version of that code is here.
Is this a feature you might think about adding to the library? If so, I will try to make a pull request.
Couldn't localize/find a way to reproduce on a blank project yet, but maybe this will tell you something:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined. You likely forgot to export your
component from the file it's defined in.
Navigating to https://react-overdrive.now.sh/ yields a page saying "402: payment required". I assume that is not a good demonstration of what this package can do.
Hi there! Are you still maintaining this project? If not would you point to other libraries who are solving similar problems?
Full disclosure I maintain a library called yubaba
(https://github.com/madou/yubaba) which has been around for a few years. It solves a similar problem to react-overdrive
while also providing other animations, a really handy orchestration layer to manage the animations, and a method for consumers to make their own animations.
Cheers
console.warn node_modules/react-dom/cjs/react-dom.development.js:88
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
npx react-codemod rename-unsafe-lifecycles
in your project source folder.Line 158 of overdrive.js:
componentWillReceiveProps () {
this.onShowLock = false
this.onHide()
}
Thanks for this great lib! Can we add -webkit prefixes for transition and transform to support older safari? Would only be a few extra lines of code. Happy to make a PR for this if you are okay with it.
If connected components are used inside overdrive, they do not receive store reference and throw an error
Looking at the docs it appears the original component has to be unmounted in order to create a transition.
Would it make sense to add an option that does not require an element to be unmounted and still perform an "overdrive" transition?
A use case would be a popup / tooltip window that transitions out of the highlighted item but doesn't (always) cover it.
Is it possible to use custom ease?
Hi, overdrive has a great concept, thanks for the work you've done!
I'm having a problem with the use cases stated in the title: I'm trying to animate a menu transition and the React-router Links in that menu break the animation with an error stating they need to be in an ancestor of a Router element.
I figured the problem comes from the fact that the animation is rendered in a div, that is created as a child of the body element (which is above the Router). It may as well be the case that the renderSubtreeIntoContainer method doesn't give access to the parent elements, because I tried replacing window.document.body.appendChild
with window.document.getElementById('App')
(the main class in my tests, that is nested in a BrowserRouter).
Is this for simplicity's sake or would it complicate things if the start and end animation elements were rendered each as a child of the Overdrive component (in the render function)? They have absolute positions after all.
I believe that way the renderSubtreeIntoContainer call wouldn't be needed.
I tried implementing the above but quickly found myself over my head with the debugging, I'm quite new to React.
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.