SamsaraJS is a library for animating layout.
It provides a language for positioning, orienting and sizing DOM elements and coordinating the animation of these properties over time. To do so, it borrows from the principles of reactive programming. Everything in SamsaraJS — from user input to the rendering pipeline — is a stream. Building interactive interfaces becomes the art of composing streams.
In other words, if you've ever wanted the opacity of a nav bar to fade with the displacement of a hamburger menu which slides in step with a user's swipe gesture, then you might want to click these buttons.
It provides a language for positioning, orienting and sizing DOM elements and coordinating the animation of these properties over time. To do so, it borrows from the principles of reactive programming. Everything in SamsaraJS — from user input to the rendering pipeline — is a stream. Building interactive interfaces becomes the art of composing streams.
In other words, if you've ever wanted the opacity of a nav bar to fade with the displacement of a hamburger menu which slides in step with a user's swipe gesture, then you might want to click these buttons.
FEATURES
3D Rendering
Take advantage of full 3D space to add depth and perspective to your apps.
Performance
SamsaraJS exports CSS3 hardware accelerated transforms and opacity values to avoid DOM reflow and keep applications running
at 60 frames per second. Translate, rotate, scale, skew, fade in and out without any perceived cost to performance.
Animation
Coordinate the animations of hundreds of DOM elements. Chain animations together and build
animation pipelines using our stream architecture. Use easing curves or physics-inspired
transitions.
Physics
Use concepts like elasticity and tension to create physically-inspired interactions. Let the
velocity of a drag carry into a recoil animation, or add a spring-like bounce at the end of a
tween.
Gestures
Connect gestures like drags and scrolls directly to layout.
Support multitouch gestures like pinch and rotate. Use velocities and other computed
quantities for your interactions to make them seem natural and fluid.
Responsive Design
Think about responsive design in a new way. Size, like everything else, is a stream,
from the browser window to each rendered object. Use it to distribute content, or adapt a layout
to resizing elements. In Safari Tabs demo above, removing a tab made the scrollview animate to its
new size — this requires 0 lines of code.
PRINCIPLES
Continuous, not Discrete
Today's interfaces are beyond "point and click". We swipe, scroll, pinch,
resize, drag and more. User input is a continuous stream of events and it's time layout
be thought as continuous as well. Why click "next page" when you can scroll?
Why click "delete" when you can swipe? A UI should evolve in lock step with the user.
Let's evolve "point and click" to "point and move".
Presentation, not Content
SamsaraJS doesn't have any opinions about content. It moves rectangles around
the screen — what you do inside them is up to you. SamsaraJS doesn’t include any
support for routing, server syncing, templating or data-binding; there are plenty of other great
libararies for that. Your content can come from a React component, a Handlebars template,
or given to a Backbone view, and SamsaraJS won't get in the way.
Web, not Native
We believe in the decentralized web. We think apps can be distributed by
hyperlink, opened and closed like tabs, crawled by search engines, and viewed on any device with
a browser. SamsaraJS was designed to blur the distinction between mobile web and native apps.
By solving the performance problems on mobile and unhinging the expressiveness possible in interface
design, we hope users of SamsaraJS will extend what was previously thought possible on the web.