bigwheel
bigwheel is an unopinionated, minimalist framework which handles frontend application state. It can be used to organize your application into "sections"/pages which are brought in by routes. Animation is a first class citizen and is accounted for when managing application states. bigwheel does not conform to a specific render engine framework so a project which is based on the DOM, WebGL, Canvas2D, SVG, or even Console applications can be built using bigwheel.
Full Documentation
https://github.com/bigwheel-framework/documentation
Usage
Example
Note this is not a "best practice" example but simply a concise example that shows many of the features of bigwheel
. Refer to the documentation link above for best practices and other information.
var bigwheel = ;var Tween = ; // create our framework instancevar framework = ; // this will start bigwheel and it will start resolving routesframework; // This is the definition for the sections which bigwheel will run// sections can define init, resize, animateIn, animateOut, destroy functions// these will methods will be called by bigwheel { var el; return // the init function creates the view and initializes it // after init finishes the view should not be visible { el = ; el { framework; }; ; } // the resize function will be called imediately after init // here you can apply "responsive" calculations on your view { var fontSize = width / 500 * 30; elstylefontSize = fontSize + 'px'; elstyletop = Math + 'px'; } // in animateIn you'll animate in your hidden content that // was created in init { Tween; } // in animateOut you'll animate out your content that // was created in init { Tween; } // in destroy you'll clean up the content which was // created in init { elparentNode; } ;} // this is just a utility function created for this example to create// an element which will be added to the dom and initialized { var el = document; elinnerHTML = 'Click to go from "' + reqroute + '" to "' + + '"'; elstyleposition = 'absolute'; elstylecursor = 'pointer'; return documentbody;} // this function acts as almost like a model for this example// generally you'd either load your model from a server or// have a static model object { return '/': '/about' '/about': '/contact' '/contact': '/' reqroute ;}
License
MIT, see LICENSE.md for details.