@spring-keyframes/driver
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.52 • Public • Published

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

    Install

    npm i @spring-keyframes/driver

    DownloadsWeekly Downloads

    82

    Version

    0.0.52

    License

    MIT

    Unpacked Size

    189 kB

    Total Files

    90

    Last publish

    Collaborators

    • avatar