berzniz / berzniz/react-overdrive

Nested overdrive animations

Open
#34 1 comment 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.