https://github.com/adamseckel/spring-keyframes

✌️1.4kb library to generate css keyframes in css-in-js based on a spring algorithm, with emotion
https://github.com/adamseckel/spring-keyframes

animation css css-in-js emotion react

Last synced: 7 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/adamseckel/spring-keyframes
• Owner: adamseckel
• Created: 2018-03-11T16:45:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T02:04:54.000Z (almost 2 years ago)
• Last Synced: 2024-10-04T20:04:09.388Z (about 1 month ago)
• Topics: animation, css, css-in-js, emotion, react
• Language: TypeScript
• Homepage: https://spring-keyframes.hemlok.io
• Size: 2.15 MB
• Stars: 67
• Watchers: 3
• Forks: 3
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


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

`

```