aminembarki/tremulajs

TremulaJS: Picture Streams + Momentum Engine + Bézier Paths + Multi-Device

TremulaJS

Picture Streams + Momentum Engine + Bézier Paths + Cross-Browser + Cross-Device

TremulaJS is a client-side javascript UI component providing Bézier-based content-stream interactions with momentum & physics effects for mouse, scroll and and touch UIs.

Put another way, TremulaJS can be thought of as an extremely bad-ass image carousel.

Watch the TremulaJS video demo here

While there are some monumental physics-based JS animation frameworks out there -- most notably, famo.us, gsap and velocity.js -- TremulaJS was built with a very specific end in mind: to enable the kind of long-running, low-friction user interactions one might enjoy when navigating large sets of visual data.

See TremulaJS in the wild: currently in production on Art.com.

TremulaJS is compatible with all recent versions of iOS Safari, Chrome, OS X Safari, FF, IE.

TremulaJS was created by Garris Shipon at Art.com Labs.

Licensed under GPLv3.

follow @garris

More info...

• See the demo video (2.5 min), illustrating some of the visual possibilities.

• Play with the live component demo

• Experiment with the configuration file on CodePen

• Get up-and-running with the fully-documented boilerplate file, includes a summary of all configuration settings.

• Download, Fork, Contribute on GitHub

• Learn how to create your own Grid Projections -- technical articles coming soon here!

follow @garris

Installing

cd to the root of your project then...

 $ bower install tremulajs --save

Optional install for mocha test framework and local host server (this is just a convenience for testing on local phones and tablets.)

cd to the tremulajs directory then...

$ npm install

Running the local test server

cd to the tremulajs directory then...

 $ node server.js

Running mocha.js tests

with the test server running (or you can skip that part and use a browser with same origin policy disabled)

$ open http://localhost:3000/test.html

Building with r.js

cd to the tremulajs directory then...

$ node r.js -o build.js; node r.js -o cssIn=src/Tremula.css out=dist/Tremula.css optimizeCss=standard

Dependencies

• HammerJS (A most awesome touch event component)
• JsBezier (Thank you Simon Porritt !)
• jQuery (jQuery is a little overkill at this point -- It would be very straightforward to remove the few remaining convenience calls. For now, still required. John Resig, I salute you!)

Tested in the following browsers

iOS Safari, Chrome, OS X Safari, FF, IE (recent versions)