hemlok / spring-keyframes

Generate css keyframes in css-in-js based on a spring algorithm, with emotion: https://github.com/emotion-js/emotion.

Spring transform properties: transformX, transformY, scale3d, as x, y, and scale, as well as opacity.

• The default export is wrapped in emotion's keyframes, however you can also export { spring } which returns an array you can join and use with other css-in-js solutions. (I think...)

Note: for scale, be sure to use a higher precision, like 4.

Example

This example is done for a react app, but can easily work without react with emotion

import spring from 'spring-keyframes'
import styled from 'react-emotion'

const options = {
  stiffness: 80,
  damping: 50,
  precision: 4,
  unit: 'px',
}

const Component = styled.div`
  animation: ${spring({
    from: {
      opacity: 0,
      x: 0,
      scale: 0
    },
    to: {
      opacity: 1,
      x: 100,
      scale: 1
    }
  }, options)} 300ms;
  animation-fill-mode: both;
`