https://github.com/pakastin/animationframes

Minimalistic way to create JS animations!
https://github.com/pakastin/animationframes

animation css easing-functions html5 javascript js-animations

Last synced: 4 months ago
JSON representation

Minimalistic way to create JS animations!

• Host: GitHub
• URL: https://github.com/pakastin/animationframes
• Owner: pakastin
• License: mit
• Created: 2017-01-07T13:07:40.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-07-20T07:54:21.000Z (almost 3 years ago)
• Last Synced: 2025-02-28T14:47:32.932Z (5 months ago)
• Topics: animation, css, easing-functions, html5, javascript, js-animations
• Language: JavaScript
• Homepage:
• Size: 71.3 KB
• Stars: 56
• Watchers: 6
• Forks: 5
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?maxAge=3600&style=flat-square)](https://github.com/Flet/semistandard)

[![npm](https://img.shields.io/npm/v/animationframes.svg?maxAge=60&style=flat-square)](https://www.npmjs.com/package/animationframes)

[![Twitter Follow](https://img.shields.io/twitter/follow/pakastin.svg?style=social&maxAge=3600)](https://twitter.com/pakastin)

# animationframes

Minimalistic way to create JS animations (~1.5 KB). Use [prefix](https://github.com/pakastin/prefix) to auto-prefix CSS properties.

Battle-tested in my [HTML5 Deck of Cards](https://deck-of-cards.js.org), [source](https://github.com/pakastin/deck-of-cards/blob/master/lib/card.js#L65).

## install

```

npm install animationframes

```

## usage

```js

import AnimationFrames from 'animationframes';

const translate = (el, x, y) => el.style.transform = `translate(${x}%, ${y}%)`;

const { from } = AnimationFrames;

const el = document.createElement('h1');

const animation = new AnimationFrames({

  delay: 0,

  duration: 1000,

  oninit () {

    el.style.display = 'none';

  },

  onstart () {

    el.style.display = '';

  },

  onprogress (e) {

    translate(el, from(-100, e), 0);

  },

  onend () {

    el.style.transform = '';

  }

});

el.textContent = 'Hello world!';

document.body.appendChild(el);

```

https://jsfiddle.net/w7zhurx3/

Another example: https://jsfiddle.net/1oj7y29g/1/

## easings

Available easings: https://github.com/pakastin/animationframes/blob/master/src/ease.js

## oldskool

```html

const animation = new AnimationFrames( ... );

...

```

## License

[MIT](https://github.com/pakastin/animationframes/blob/master/LICENSE)