chenglou / chenglou/react-motion

End of the interpolated curves are giving a lot of very similar values.

Open
#308 2 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'm trying to do route transition using the TransitionMotion. One issue I am having is that the transition seems to end forever. By that I mean that there is a very long moment where the modal has moved up completely but stays blank because I wait until the animation is complete until rendering the content. This ensures that the modal doesn't frame.

The curves have a lot of points in their endings at very low velocity (see graph below). This takes like half of the "animation time". (Basically 500ms of animation and then 500 ms of being "almost static", but still rendering a lot...). I tried changing stiffness, damping, precision, but it seems to always give me about the same length of 950ms in my case.

See the values near the end. Basically a lot of points are between `target` and `target - 1`, which doesn't provide much difference.

``` js
const ANIMATE_STYLE = { offset: spring(0, { stiffness: 210, damping: 26, precision: 0.01 }) };
```

![image](https://cloud.githubusercontent.com/assets/4422516/14040020/2ccc0062-f220-11e5-9750-d1e310e0d899.png).

---

Is there a way I can get the current target & current val (I seem to get only currentVal in getStyles and only current Target in willLeave)? This way I could tell the current style to "stop" interpolating (eg: if target is 0 and we're at < 0.3, I could pass a flat 0 instead of a spring). Same for exit if I get the target & the value, then if the value is close enough I could pass a flat value instead of a spring to have it exit earlier.

By enabling early exit, I could then use the getStyle to provide a flat value since the number of elements in "oldStyles" when from 2 to 1 for example. Allowing for quicker "entry" also.

``` js
const leavingStyle = willLeave(oldMergedPropsStyle, oldCurrentStyles[oldIndex]);
```

Or maybe is there an issue with velocity? Should it be stopping earlier? The end of the graph delta seems to be under precision of 0.01. Should I be using a much lower precision?

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the route transition with TransitionMotion and the spring settings shown in the issue. Start with getStyles and willLeave, checking how current values, targets, precision, and velocity determine when interpolation ends. Done means the modal no longer spends a long near-static period blank, with the behavior covered for both entering and leaving transitions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.