dmvaldman / samsara

Continuous UI
http://samsaraJS.org
Other
1.05k stars 66 forks source link
css3 html5 layout reactive ui

Note: This project is not being developed further at the moment. I hope to return to it soon.

Build Status Gitter Chat

SamsaraJS is a library for building continuous user interfaces. A continuous UI is one where many visual elements are animating in coordinated ways. For example, you may want to fade the opacity of a nav bar while a settings menu is translated by a user's swipe gesture. Or maybe you want to blur and scale a banner image when a user scrolls some content past its limits, and add a springy bounce at the end.

Building these interactions and maintaining performance is hard, and SamsaraJS is here to help. It supports

SamsaraJS is opinionated about presentation, but has no opinions about content. It moves rectangles around the screen — what you do inside them is up to you. There is no support for routing, server syncing, templating, data-binding, etc. There are many other frameworks for those needs, and Samsara is designed to be friends with them.

Getting Started

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

Examples

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

Here's a video of a demo of an interactive helical arrangement of divs.

Helix

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 git@github.com: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.

Yeoman Generator

A generator was made by @richardkopelow. This is an easy way to get started if you're comfortable with yeoman. Follow the installation instructions here.

Talks

Talk JSConf EU 2015 Berlin, Germany

Talk InRhythm Meetup