berzniz / berzniz/react-overdrive
Nested overdrive animations
- Dominant language
- JavaScript
- Stars
- 3k
- Forks
- 83
- PR merge metrics
- No merged PRs in 30d
Description
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.](http://lucky-kettle.surge.sh/)
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](https://github.com/aholachek/overdrive-experiment/blob/master/src/react-overdrive/src/overdrive-edits.js).
Is this a feature you might think about adding to the library? If so, I will try to make a pull request.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked demo and the experimental implementation in src/react-overdrive/src/overdrive-edits.js. Compare the nested-element failure with the hacked-overdrive example, then define the public animationStart API and its expected source and target refs. Done means nested overdrive animations work without duplicate-element issues and the behavior is covered by tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100