https://github.com/farhadg/famous-divider

Famo.us [0.3] divider for breaking any app (your app) into as many rows & columns
https://github.com/farhadg/famous-divider

demo famous

Last synced: about 1 month ago
JSON representation

Famo.us [0.3] divider for breaking any app (your app) into as many rows & columns

• Host: GitHub
• URL: https://github.com/farhadg/famous-divider
• Owner: FarhadG
• Created: 2015-05-23T01:48:39.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2018-09-13T03:23:30.000Z (over 6 years ago)
• Last Synced: 2023-08-06T19:54:33.905Z (over 1 year ago)
• Topics: demo, famous
• Language: JavaScript
• Homepage: http://farhadg.github.io/famous-divider/public/
• Size: 197 KB
• Stars: 3
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Famo.us Divider

==============

A simple and cool way to segment your app (any app) into as many rows and columns (bound to hardware limitations) and animate them any way you desire.

That said, I may be doing a rewrite using the new Famo.us Engine (that uses WebGL), for performance, usability and features comparisons. This project is in its early stages and still has many things left to do. If something is not working or you would like a new feature, please use the issues page.

## Demo

Click for a simple demo using [one] app in sync across 5 rows and 5 columns: Famo.us Divider.

## Installation

You can simply fork or clone (download); then follow the given commands.

```

  $ git clone https://github.com/FarhadG/famous-divider.git

  $ npm install

  $ npm run start

```

## Usage

Once you've installed all of the dependencies and issued the command `npm run start`, npm will automatically fire up a server at `http://localhost:1337`.

Go to the `src` directory and find `index.js` for the entry file. You will, then, see the simple API to instantiante your app with the Famou.us Divider:

```javascript

/*

 *  The Famo.us Divider instantiation that takes is various

 *  inputs for configuring your app with

 */

var divider = new Divider({

    // Your app

    app: SampleAd,

    // Width and height for the app

    appWidth: window.innerWidth,

    appHeight: window.innerHeight,

    // Controllers that are passed down to keep your app in sync

    transitionables: controllers.transitionables,

    // Number of rows and columns to divide your app

    column: 5,

    row: 5,

    // Debugger view for showing the divides cutout

    debug: true,

    // Sample animations modifier showing the power and capabilities

    badass: true

});

```