JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Agile Css3 Engine
    Filed under 

    • 🔾22%Overall
    • 499
    • 72.8 days
    • 🕩68
    • 👥5

    AgileJS - The Css3 Creation Engine

    license Release Version PRs Welcome npm

    Agile banner

    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/

    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 and include it in your html document.

    <script src="js/agile.min.js"></script>
    

    Or install using npm

    anix

    npm install agilejs --save
    ... 
    
    import Agile from 'agilejs';
    

    Create and move a circle:

    //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:

    git clone git://github.com/drawcall/AgileJS.git
    ...
    npm install
    npm run build
    

    and run examples

    npm start
    //vist http://localhost:3001/examples/
    

    es6 lint

    npm run lint
    

    License

    LicenseFinder is released under the MIT License. http://www.opensource.org/licenses/mit-license

    Show All