All Projects → drawcall → Agilejs

drawcall / Agilejs

Licence: mit
AgileJS - The Css3 Creation Engine 🍖🌭🍔

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Agilejs

aioneframework
Aione Framework: All-in-one lightweight mobile first front-end framework to design websites, web applications, mobile applications, progressive web applications having large number of examples, documentation, tutorials, community support, components.
Stars: ✭ 13 (-97.34%)
Mutual labels:  css-animations, css-framework
atomize
A library of atomic CSS classes.
Stars: ✭ 51 (-89.57%)
Mutual labels:  css3, css-framework
learn-css-animation
Learn CSS animation with fun. It is simple, easy to use, and fun to learn.
Stars: ✭ 54 (-88.96%)
Mutual labels:  css3, css-animations
web-animation-club
CSS controlled animations with transitionEnd, onTransitionEnd, animationend, onAnimationEnd events and frame throwing. Tiny javascript library with cross-browser methods to handle css animation/transition callbacks and event loop frame throwing. 📚🖥️📱
Stars: ✭ 52 (-89.37%)
Mutual labels:  css3, css-animations
Smart Css Grid
SMART CSS GRID - CSS Framework
Stars: ✭ 291 (-40.49%)
Mutual labels:  css-framework, css3
Stylizer
Stylizer is a flexible Css framework based on the visual aspect, the framework offers you a clean and easy work.
Stars: ✭ 44 (-91%)
Mutual labels:  css3, css-framework
Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (-88.34%)
Mutual labels:  css3, css-framework
sass-structure
Sass folder structure => organizing project files.
Stars: ✭ 32 (-93.46%)
Mutual labels:  css3, css-framework
You Need To Know Css
💄CSS tricks for web developers~
Stars: ✭ 3,777 (+672.39%)
Mutual labels:  css3, css-animations
unitscss
UNITS is a simple and beautiful CSS component set.
Stars: ✭ 13 (-97.34%)
Mutual labels:  css3, css-framework
Landing-Page-Animation
Landing page animation made using CSS
Stars: ✭ 45 (-90.8%)
Mutual labels:  css3, css-animations
Filters.css
CSS only library to apply color filters.
Stars: ✭ 318 (-34.97%)
Mutual labels:  css-framework, css3
hexa
Awesome Css Animation. The documentation =>
Stars: ✭ 32 (-93.46%)
Mutual labels:  css3, css-animations
MERN-BUS-APP
This is a MFRP (My first Real Project) assigned to me during my internship at Cognizant. Made with MERN Stack technology.
Stars: ✭ 92 (-81.19%)
Mutual labels:  css3, css-animations
strawberry
A new flexbox based CSS micro-framework.
Stars: ✭ 71 (-85.48%)
Mutual labels:  css3, css-framework
css-collection
🧙‍♂️ CSS芸人への道(CSSでつくったもの集)| I want to be CSS Magician
Stars: ✭ 82 (-83.23%)
Mutual labels:  css3, css-animations
swatch
A lightweight, modern theming library based on CSS variables and the setter/getter pattern.
Stars: ✭ 14 (-97.14%)
Mutual labels:  css3, css-framework
aprendendo-css
Vários desenhos feitos com CSS e SCSS (e as vezes um pouco de JavaScript)
Stars: ✭ 56 (-88.55%)
Mutual labels:  css3, css-animations
skelet
Skelet.css a contemporary CSS framework. The basics to get started.
Stars: ✭ 69 (-85.89%)
Mutual labels:  css-animations, css-framework
Pattern.css
CSS only library to fill empty background with beautiful patterns.
Stars: ✭ 3,481 (+611.86%)
Mutual labels:  css-framework, css3

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].