sk
spring-keyframes
npm i spring-keyframes
sk

spring-keyframes

✌️1.4kb library to generate css keyframes in css-in-js based on a spring algorithm, with emotion

by Adam Seckel

2.0.1 (see all)License:MITTypeScript:Built-In
npm i spring-keyframes
Readme
alt text

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;
`

Downloads/wk

1

GitHub Stars

56

LAST COMMIT

3yrs ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

0

OPEN PRs

11
VersionTagPublished
2.0.1
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial