react-motion preset keyframe generator in stylus

react-motion-preset-keyframes.styl

sqrt(x)
  if x == 0
    result = 0
  else
    result = 4
    for i in (0..10)
      result = ((result + (x / result)) / 2)

spring-noWobble(t)
  return 2.71828 ** (-13 * t) * (2.71828 ** (13 * t) - 13 * sin(t) - cos(t))

spring-gentle(t)
  return -1 * (7 * 2.71828 ** (-7 * t) * sin(sqrt(71) * t)) / sqrt(71) - 2.71828 ** (-7 * t) * cos(sqrt(71) * t) + 1

spring-wobbly(t)
  return -0.5 * (2.71828 ** (-6 * t)) * (-2 * (2.71828 ** (6 * t)) + sin(12 * t) + 2 * cos(12 * t))

spring-stiff(t)
  return -1 * sqrt(10 / 11) * (2.71828 ** (-10 * t)) * sin(sqrt(110) * t) - 2.71828 ** (-10 * t) * cos(sqrt(110) * t) + 1

lerp(a, b, p)
  return a + p * (b - a)

@keyframes move
  for i in (0...100)
    {i + '%'}
      t = i / 100
      p = spring-wobbly(t)
      left: lerp(0px, 280px, p)

wat.txt

react-motion has some stiffness/dampening presets for their spring based animations:

- noWobble (stiffness: 170, damping: 26)
- gentle (stiffness: 120, damping: 14)
- wobbly (stiffness: 180, damping: 12)
- stiff (stiffness: 210, damping: 20)

@see https://github.com/chenglou/react-motion/blob/9cb90eca20ecf56e77feb816d101a4a9110c7d70/src/presets.js
@see https://medium.com/@dtinth/spring-animation-in-css-2039de6e1a03

this is some stylus code that generates css keyframe animations for those presets.