berzniz / react-overdrive Goto Github PK

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

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! Do you think it might be more React™ To use refs instead of ids?

Hi @berzniz

Thank you for this awesome component: simple as saying hello but so powerful results!

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

Is it possible to use custom ease?

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

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?

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.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Line 158 of overdrive.js:

  componentWillReceiveProps () {
    this.onShowLock = false
    this.onHide()
  }      

Seems like our friends from Futurama are no longer loading:

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.

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

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.

Add support for react 15 and don't use unstable method

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.

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!

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.

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.

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?

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.

Are there similar libraries out there that you could recommend for non React projects? (Plain HTML/CSS/JS)

Thanks

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

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