chenglou / chenglou/react-motion
Unable to succinctly express +acceleration with springs
- Dominant language
- JavaScript
- Stars
- 21.9k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
When a new element transitions _into_ view, it should _decelerate_ to appear settled into place. When an element transitions _out of_ view, it should _accelerate_ until it's gone. This is common animation practice, and Google has even documented it as part of their "Motion" section for the Material Design spec:
- https://material.google.com/motion/movement.html#movement-movement-in-out-of-screen-bounds
Spring physics work great out of the box for transitioning elements into view, or from one location to another. However it quickly becomes cumbersome to create the appearance of acceleration right up until the end of an animation using springs, as they are always trying to reach a settled state.
One workaround I see is to set the target about twice as far off-screen as usual, so the element is hidden before it decelerates. This has the disadvantage of doubling the amount of computed frames necessary and keeping DOM elements around longer. It's further complicated when multiple properties should be animated. I end up tweening from a value of 0 to 2, and just using the first half of interpolated values from 0 to 1 to map style values myself, essentially discarding the rest.
Unmounting animation support seems to be a big win these days. Given that unmounted components are leaving the view, I'd think this would be a >5% use case.
Contributor guide
No contributing guide indexed for this repository
Research direction
No file, test, or entry point is named. Start by reading the linked Material Design Motion reference and the repository's existing spring and unmounting-animation behavior. Done would mean a concise way to express acceleration for elements leaving view without doubled off-screen targets or manually discarding interpolated values.
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
- 30/100