search

chenglou / react-motion

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

Spring documetation: clarify stiffness and damping #229

Closed dey-dey closed 8 years ago

dey-dey commented 8 years ago

This was a bit of an unknown for me when first trying to use it. I had wikipedia Springs to remember what damping was, which was admittedly pleasant, but not altogether friendly to most webdevs working with animations.

Is there any way we can take a stab at relating the spring from physics to animation? Maybe a helpful gif or something?

Also sidenote: opaque configuration is a little vague IMO?

chenglou commented 8 years ago

What part of "opaque configuration" is vague? Genuinely asking.

And yeah, the balls grid demo was partially an attempt to illustrate stiffness and damping intuitively. I'd gladly accept some gif explanation though (while we're at it, an illustration of TransitionMotion's mechanism).

dey-dey commented 8 years ago

@chenglou sorry not trying to be difficult. I don't know what opaque configuration means. As opposed to translucent configuration? Which is what?

Could just be returns a configuration object.

chenglou commented 8 years ago

Oh, "opaque" as in "you shouldn't peek under it and access its members because we might change its representation in the future"

dey-dey commented 8 years ago

Ahhhhh cool, I've heard other terms for that, just not opaque.

Also I like the ball demo, just took a little while to understand what i was seeing. Maybe a gif quickly illustrating an intuitive difference between to settings a la http://cubic-bezier.com/#.17,.67,.86,.59

I'd be happy to add that.

chenglou commented 8 years ago

Yeah that'd be cool.

Got any suggestion for a better term than opaque?

dey-dey commented 8 years ago

Well it'd be nice to make it frozen or immutable in that case, but I generally see private used most frequently. As in a a configuration object with private properties.

That said, since what is returned is not of use at all to the developer (except maybe for introspection), perhaps just passing in a config object and then using spring() would make the API more friendly, but I suppose that's another thing altogether. Perhaps I'm not understanding it's use properly.

chenglou commented 8 years ago

Well it'd be nice to make it frozen or immutable in that case

Yeah I guess we could freeze in dev. Kinda expensive though.

Private sounds good.

That said, since what is returned is not of use at all to the developer (except maybe for introspection)

Introspection is exactly why I didn't want to expose it. I might change the format in the future. But maybe I'm coding too defensively here.

perhaps just passing in a config object and then using spring() would make the API more friendly

Not sure what's the use of spring if you pass the config directly then? For the record, it was indeed a plain object instead of the spring helper before, but that had a bit of boilerplate.

dey-dey commented 8 years ago

here's the doc PR: https://github.com/chenglou/react-motion/pull/234

Yeah I guess we could freeze in dev. Kinda expensive though.

True. There's other ways, but I assume this is low priority.

Not sure what's the use of spring if you pass the config directly then.

Ya, since it's only three properties could just be { value: 10, spring: [100, 26] } and then just generate the configuration object under the hood, but perhaps this is also not too important.

Thanks for the quick replies!

dey-dey commented 8 years ago

This can be closed now.