https://github.com/drawcall/agilejs
AgileJS - The Css3 Creation Engine 🍖🌭🍔
https://github.com/drawcall/agilejs
animation css-animations css-framework css-games css3 css3-animations css3-engine game-framework html5-css3
Last synced: 9 months ago
JSON representation
AgileJS - The Css3 Creation Engine 🍖🌭🍔
- Host: GitHub
- URL: https://github.com/drawcall/agilejs
- Owner: drawcall
- License: mit
- Created: 2014-02-26T04:24:01.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2021-11-18T08:28:41.000Z (about 4 years ago)
- Last Synced: 2024-08-02T08:07:37.254Z (over 1 year ago)
- Topics: animation, css-animations, css-framework, css-games, css3, css3-animations, css3-engine, game-framework, html5-css3
- Language: JavaScript
- Homepage: http://drawcall.github.io/AgileJS/
- Size: 11.9 MB
- Stars: 498
- Watchers: 35
- Forks: 63
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
AgileJS - The Css3 Creation Engine
======
[](./LICENSE)
[](https://github.com/drawcall/Agilejs/releases)
[](https://github.com/drawcall/Agile/pulls)
[](https://www.npmjs.com/package/agilejs)
## Using javascript generated pure CSS3
AgileJS is a simple, fast and easy to use engine which uses javascript generated pure CSS3.
Check out examples at [http://drawcall.github.io/AgileJS/](http://drawcall.github.io/AgileJS/)
## Features
- AgileJS uses javascript to generate pure CSS3, without canvas, webGL or SVG.
- Performant on mobile devices, being truly cross platform.
- AgileJS’s API has high similar characteristic with actionscript 3.0, you can learn it in 10 minutes.
## Usage
#### Download the [minified library](https://github.com/drawcall/Agile/blob/master/build/agile.min.js) and include it in your html document.
```html
```
#### Or install using npm
[](https://npmjs.org/package/agilejs)
```shell
npm install agilejs --save
...
import Agile from 'agilejs';
```
#### Create and move a circle:
```javascript
//init AgileJS
Agile.mode = '3d';
const container = new Agile.Container('container');
container.select = false;
container.perspective = 1000;
//create a displayobject
const circle = new Agile.Circle(80, '#ff0000');
circle.x = 100;
circle.y = 120;
container.addChild(circle);
//add a keyframes
const keyframes = new Agile.Keyframes(100, {
scaleX : .5,
scaleY : .5
});
circle.addFrame(1, keyframes, {
yoyo : true,
loop : -1
});
```
## Building AgileJS
Node is a dependency, use terminal to install it with with:
```javascript
git clone git://github.com/drawcall/AgileJS.git
...
npm install
npm run build
```
and run examples
```javascript
npm start
//vist http://localhost:3001/examples/
```
es6 lint
```javascript
npm run lint
```
## License
LicenseFinder is released under the MIT License. http://www.opensource.org/licenses/mit-license