Open appsforartists opened 7 years ago
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:
cubic-bezier
timing function that's as close to a sine curve as possibleFunny 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:
cubic-bezier
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.
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