https://github.com/ymzuiku/vanilla-spring

Use keyframes run spring
https://github.com/ymzuiku/vanilla-spring

Last synced: about 2 months ago
JSON representation

Use keyframes run spring

• Host: GitHub
• URL: https://github.com/ymzuiku/vanilla-spring
• Owner: ymzuiku
• License: mit
• Created: 2019-10-22T11:50:58.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-04-05T13:23:32.000Z (about 2 years ago)
• Last Synced: 2024-10-29T21:29:45.404Z (6 months ago)
• Language: TypeScript
• Size: 20.5 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vanilla-spring

Use keyframes run spring animation.

Tiny, gzip: 0.4kb, run every(Vanilla, React, Vue...) project.

Thank Project: Springer

## Install

```sh

$ npm install --save vanilla-spring

```

or

```js

```

## Only a function

```js

import vanillaSpring from 'vanilla-spring';

vanillaSpring({

  name:'move',

  makeReverse: true,

  keyframe: v=> `

    transform: translateX(${100 * v}px);

    opacity: ${v};

  `,

})

const view = document.getElementById('view');

view.style.animation = 'move 1s';

// move back and keep end

setTimeout(funciont(){

  view.style.animation = 'move-reverse 1s';

  view.style.animationFillMode ='forwards';

}, 2000);

```