cybernetics / samsara

Reactive layout for user interfaces

SamsaraJS is a functional reactive library for animating layout. It provides a language for positioning, orienting and sizing DOM elements and animating these properties over time. Everything in SamsaraJS — from the user input to the rendering pipeline — is a stream. Building a user interface becomes the art of composing streams.

SamsaraJS was created to solve performance on the mobile web. Under the hood, animations are hardware accelerated and batched by a single request animation frame loop. Building responsive user interfaces is made possible with physics-based transitions, rich support for gestures, and a stream architecture that makes coordinating complex animations simple.

SamsaraJS doesn't have any opinions about content, only presentation. It moves rectangles around the screen — what you do inside those rectangles is up to you. It doesn’t include any support for routing, server syncing, templating or data-binding; there are plenty of other great frameworks for that. If we don’t play nicely with your tools, let us know and we will do our best to improve. Integrations with MVC frameworks like Backbone and React are on the roadmap.

tl;dr If you've ever wanted the opacity of a nav bar to respond to the displacement of a hamburger menu which responds to a user's swipe gesture, then you might want to clone this repo.

Getting Started

Resources
Guide	samsaraJS.org/docs
API docs	samsaraJS.org/reference_docs
Questions	SamsaraJS Google Group

Examples

Example	Demo (fullscreen)	Description
Logo	demo • docs	The SamsaraJS logo
Cube	demo • docs	3D spinning cube with animated size
ParallaxCats	demo • docs	Scrollview of cat images that parallax with the scroll
Carousel	demo • docs	A paginated scrollview converted into a slideshow with previous/next buttons
SideMenu	demo • docs	A navigation UI with an exposed side drawer
Safari Tabs	demo • docs	A scrollview imitating the mobile Safari tab viewer

Installation

SamsaraJS requires a small CSS file located at dist/samsara.css or samsara/samsara.css. For all of the installation methods below, you will also need to include this CSS file for SamsaraJS to work properly.

Git

Clone this repo

	git clone [email protected]:dmvaldman/samsara.git

You'll find AMD modules in the samsara directory, CommonJS bundles in the dist directory, examples in the examples directory and reference documentation in the docs directory.

NPM

Install the CommonJS build of Samsara with

	npm install samsarajs

This will provide a bundled Samsara object. Note there is a case-difference: path keys are capitalized for CommonJS but lowercase for AMD.

	var Surface = require('samsara/dom/Surface');   // AMD
	var Surface = require('samsarajs').DOM.Surface; // CommonJS

The samsara.css file will also be included in node_modules/samsarajs/dist/samsara.css.

Window Object

Copy dist/samsara.js and include it as a source file. Samsara will then be accessible through window.Samsara. This is particularly useful for sharing on sites like jsFiddle, CodePen, etc.

Talks

JSConf EU 2015 Berlin, Germany

Roadmap

• Node removal and recycling (surface.remove(), node.remove(), view.remove())
• More Tests
• Backbone.js, React.js, Vue.js integrations
• Improved Scrollview
• 3D Camera
• Migrate to es6
• More layouts