mattdesl / mattdesl/spring-input

velocity keeps high if move fast, then not end

Open
#2 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
29
Forks
5
PR merge metrics
No merged PRs in 30d

Description

I just came across this package. Really useful!

But there is one behavior that's not expected in my opinion:

I call `spring.start` in `mousedown`, `spring.move` in `mousemove`, `spring.end` in `mouseup` and `spring.update` in `requestAnimationFrame`.

Now if I press the mouse button, then move the mouse really fast, then stop the mouse movement abruptly but hold the button pressed the `spring.value` stops changing also, but if I now release the mouse button the `spring.value` starts changing again because it has still a height `velocity` value that is only being used while `spring.interacting` is `false`.

The reason is obviously because there is no `mousestop` event in javascript that could be called if the mouse is _not_ moving anymore.

My current solution is the following:

``` ts
let framesSinceMove = 0;
function onDragMove(evt) {
framesSinceMove = 0;
spring.move(evt.clientX)
}

function onDragEnd(evt) {
spring.end(evt.clientX)
}

function tick() {
if(spring.interacting && ++framesSinceMove > 3) {
spring.velocity = 0
}
spring.update()
}
```

each time `spring.update` is called I increment a counter. Each time the mouse is moved I reset the counter. Then if `spring.interacting` is `true` and `update` has been called more than 3 times (ie the mouse has not been moved for 4 frames) I reset the velocity.

I would suggest to build this into the library itself. Would you accept a pull request?

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the spring.start, spring.move, spring.end, and spring.update entry points described in the issue, focusing on how velocity is retained while spring.interacting is true. Reproduce the fast-move-then-hold sequence and verify that releasing the mouse does not restart motion caused by stale velocity.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.