search

chenglou / react-motion

A spring that solves your animation problems.
MIT License
21.69k stars 1.16k forks source link

Recommended way for applying forces? #60

Open amannn opened 9 years ago

amannn commented 9 years ago

Is there a a good way to apply forces to a system? A use case is when you drag an element on a touch device and release it with a specific velocity. You want the element to being thrown into that direction.

Additionally an element could have another force that is being applied on it, so that it will eventually move to a specific end position.

Compare for example the photo gallery of the react-touch demo of Pete Hunt. When you flick with a higher velocity, multiple photos can be navigated at once.

Is there a recommended way for doing this with react-motion?

bsansouci commented 9 years ago

Yup coming up! @chenglou's fixing some important thingy inside the API so we're waiting on those before adding features. It'll probably a prop like currVelocity={currVelocity => ...}

amannn commented 9 years ago

Great, thanks for the quick response!

bsansouci commented 9 years ago

I'm actually working on a photo gallery while exploring touch gestures and velocity. I'll ping you as soon as I get a gist up in the next couple of days.

amannn commented 9 years ago

Cool, thanks!

Btw. for inspiration for physics based animations the examples from Ralph Thomas are also very nice: http://iamralpht.github.io/constraints/ and http://iamralpht.github.io/physics/. If these can be rebuilt with react-motion then I don't know what else there could be in this lib. But he is actually lacking some features that react-motion is capable of, such as setting an end value.

chenglou commented 9 years ago

Haha, I've talked to him, definitely knows what he's doing. Hey @iamralpht, check out this new repo =).

My goal is to get as declarative as the constraint stuff, which I really appreciate. Unfortunately JS isn't expressive enough, and most people will be scared away by the constraint API so as a pragmatic reason I'll hold off. Now, if you could somehow express these constraints naturally using react's component hierarchy, I'm immediately deprecating this repo.

(Kidding, react-motion's awesome so far, but still.)

amannn commented 9 years ago

Any news on this? :)

chenglou commented 9 years ago

Not yet; hopefully soon.

benjeffery commented 9 years ago

I'd love to see some way to do this too, just being able to set current state and velocity would cover my use case - I tried with setState but I'm guessing #88 prevents this working.

appsforartists commented 8 years ago

252 might be a subset of this.

appsforartists commented 8 years ago

You can view his source to see his implementations of friction, gravity, etc. They look fairly modular - composing them into react-motion might be a good first-step into moving beyond strictly springs.

BrennanRoberts commented 8 years ago

I assume this has fallen off the map, but just as food for thought: what might this API look like? Is there any way to provide force/impulse in a declarative way?