berzniz / react-overdrive

Super easy magic-move transitions for React apps
https://react-overdrive.now.sh
MIT License
2.97k stars 85 forks source link

Nested overdrive animations #34

Open aholachek opened 7 years ago

aholachek commented 7 years ago

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.

berzniz commented 7 years ago

Thanks for all the information here. I'm going to take a deeper look into it and see if this can be added

BTW, the demo looks awesome!