Explore CSS-driven springs

[appsforartists]

Here's a library that generates CSS keyframes using react-motion's interpolator: https://github.com/codepunkt/css-spring

@jverkoey has mentioned before that react-motion's algorithm isn't accurate. We ought to be able to build something similar with Rebound fairly easy.

Safari Tech Preview also seems to have an experimental animate: spring() CSS property. We should figure out what that's about and if we should evangelize/support it: https://lists.w3.org/Archives/Public/www-style/2016Jun/0181.html

[davidkpiano]

I had a very similar idea a long time ago - it's different from css-spring in that it doesn't generate a ton of keyframes (which is sort of the brute-force method) and instead focuses on three things:

• A cubic-bezier timing function that's as close to a sine curve as possible
• Calculating the logarithmic curve in which the harmonic motion decays
• Calculating the local maxima/minima of the sine curve that is enveloped by the logarithmic curve

Funny enough, this could be fully done in SCSS (but of course, it's not dynamic): http://codepen.io/davidkpiano/pen/e02140dd8e60651d8c917e93be998c5a

but it's a bit of a proof-of-concept. So instead of generating multiple keyframes:

• generate a set number of keyframes that represent the maxima/minima (e.g., -100, 50, -25, 12, -6, 3, 0)
• Set the timing function of each keyframe to the approximated sine cubic-bezier

[appsforartists]

Nice! We've talked about that before too, but never bothered to do the math.

Great proof of concept! We don't have Tweens implemented yet, but when we do, it might be a good experiment to build a springSystem that emits a Tween with this pattern.