https://github.com/exah/framez
Modular JS animation library
https://github.com/exah/framez
animation es6-modules javascript npm-package requestanimationframe standard-js
Last synced: 4 months ago
JSON representation
Modular JS animation library
- Host: GitHub
- URL: https://github.com/exah/framez
- Owner: exah
- License: mit
- Created: 2017-03-02T18:33:29.000Z (almost 9 years ago)
- Default Branch: develop
- Last Pushed: 2018-10-10T13:30:33.000Z (over 7 years ago)
- Last Synced: 2025-08-08T16:08:04.164Z (5 months ago)
- Topics: animation, es6-modules, javascript, npm-package, requestanimationframe, standard-js
- Language: JavaScript
- Homepage:
- Size: 229 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WIP: 🎞 framez
> Modular JS animation library
## Install
> ⚠️ API is unstable, please install package with `--exact` flag.
```sh
$ npm install --save --exact framez
# OR
$ yarn add --exact framez
```
## Usage
Import required modules:
1. Import as es6 modules in webpack 2 or rollup.js (smaller result bundle)
```js
import { animate, easeInOut, updateStyles, withEase, withTime } from 'framez'
```
Or as standalone library in browser (available from `framez` global variable)
```html
(function () {
var { animate, easeInOut, updateStyles, withEase, withTime } = framez
})()
```
2. Then animate with combination of functions:
```js
const fadeOut = (target) => (
animate(
withTime(1000),
withEase(easeInOut(2)),
updateStyles(target, { opacity: 0 })
).start()
)
fadeOut('body').then(() => console.log('done!'))
```
## Why
> coming soon
## Docs
> coming soon
## Demo
> coming soon
## Related
- [Anime.js](https://github.com/juliangarnier/anime) a lightweight JavaScript animation library.
- [Animate Plus](https://github.com/bendc/animateplus) a CSS and SVG animation library for modern browsers.
- [Velocity.js](https://github.com/julianshapiro/velocity) — Accelerated JavaScript animation.
- [BezierEasing](https://github.com/gre/bezier-easing) provides Cubic Bezier Curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, ...any other custom curve) exactly like in CSS Transitions.
---
MIT © [John Grishin](http://johngrish.in)