TremulaJS: Picture Streams + Momentum Engine + Bézier Paths + Multi-Device
Branch: gh-pages
Clone or download
Latest commit 2991ef2 Aug 27, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
boilerplate example with embedded data Mar 29, 2016
dist new build Apr 9, 2015
docs updated docs Oct 14, 2014
gh-pages-demo Update tremulaControls.js Aug 27, 2018
libs Documentation is there! Jul 6, 2014
test Update stopwatch.js Nov 2, 2015
.gitignore adding mocha tests Jul 29, 2014
License.txt add CDNJS version badge in Apr 29, 2017
docs-info.js Documentation is there! Jul 6, 2014
index.html Update index.html Aug 27, 2018
index_test.html demonstration of loading via require Oct 14, 2014
package.json updated node dependencies Oct 14, 2014
r.js first commit Jun 14, 2014
test.html working on bug#2 Aug 16, 2014



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

tremula vimeo image

While there are some monumental physics-based JS animation frameworks out there -- most notably,, 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

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

TremulaJS was created by Garris Shipon at Labs.

Licensed under GPLv3.

follow @garris

More info...

follow @garris


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

Stepped scrolling (aka "paged" scrolling)

This feature will auto scroll the stream so that a single item is always presented in the center of the screen -- this is a cover-flow "like" behavior.

To view the functionality, open the demo here and call any of the following methods in the console...


Running with local data

TremulaJS is happy to run with a local data source. You will need to make sure your browser is not throwing a security error though. Safari typically does not have an issue with this. If you prefer to use chrome you can do a google search to find out how to disable same origin policy. Or, you can just run the handy server -- follow the instructions below...

Running locally with the local test server

cd to the tremulajs directory then...

 $ node server.js

Running mocha.js tests

Running tests will require MochaJS. To add, cd to the tremulajs directory then run...

$ npm install

Then you can run the test script 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;node r.js -o build_min.js; node r.js -o cssIn=src/Tremula.css out=dist/Tremula.min.css optimizeCss=standard


  • 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)