Note: This project is not being developed further at the moment. I hope to return to it soon.
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
- 3D transforms and perspective (all hardware accelerated)
- natural physics-based transitions like springs and inertia along with tweens
- user input for mouse and touch along with gestures like pinch, scale, and rotate
- a stream-based architecture for coordinating animations
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.
|Questions||SamsaraJS Google Group|
|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|
Here's a video of a demo of an interactive helical arrangement of divs.
SamsaraJS requires a small CSS file located at
samsara/samsara.css. For all of the installation methods
below, you will also need to include this CSS file for SamsaraJS to work properly.
Clone this repo
git clone firstname.lastname@example.org: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
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
samsara.css file will also be included in
dist/samsara.js and include it as a source file.
Samsara will then be accessible
window.Samsara. This is particularly useful for sharing on sites like jsFiddle, CodePen, etc.