chenglou / chenglou/react-motion

TransitionMotion has no easing into new location for adjacent elements in the set that are not mounting/unmounting

Open
#475 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
21.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

I am animating typing **numbers only** in an input field, and having commas animate in as well.

The TransitionMotion API has been mostly fantastic, but I noticed significant difficulty getting the **surrounding** elements of the nodes that were entering and leaving the DOM to animate smoothly into their new positions. An exploration of `react-flip-move` proved significantly easier.

I prefer `react-motion` to `react-flip-move` because it can handle rapid animations, perfect for typing. I think the jarring, instant movement to a new location of all non-animating nodes in the mapped set defeats the benefit of enter/leave animations for single nodes in a set.

Thanks 🙂

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the reported TransitionMotion behavior with a numeric-only input whose comma elements enter and leave. Compare the movement of adjacent, non-mounting elements with the smoother behavior observed in react-flip-move. Done means surrounding elements animate into their new positions instead of moving there instantly during enter/leave transitions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.