JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Tremula Js

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

    • 🔾39%Overall
    • 1,329
    • 22.2 days
    • 🕩83
    • 👥4

    TremulaJS

    CDNJS

    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, 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...

    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
    

    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...

    loadMountainPop()
    loadCarouselWithPop()
    loadHorizontalPop()
    

    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
    

    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)

    Show All