Skip to content
View gist:afebec8e31f5a193aa1b
Modify `./boilerplate/index.html`
Look at line 81 where we initialize tremulajs...
window.tremula = tremulaInit();//does not need to be on the window -- implemented here for convienience.
loadFlickr(); // <=== replace this line with the block below...
View TremulaJS-Boilerplate.markdown

TremulaJS Boilerplate

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.

This Pen allows you to experiment using different config file settings.

A Pen by Garris on CodePen.


View package.json
"name": "spaServer",
"description": "express app that serves index.html",
"version": "0.0.1",
"private": true,
"dependencies": {
"express": "3.x",
"underscore": "~1.6.0"
View server.js
var express = require('express')
,app = express()
,_ = require('underscore')
,util = require('util')
,os = require('os');
var rootDir = __dirname + '/app'
,port = 3000;
View rAF.js
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
View example.html
Choose a ticket class: <select id="tickets"></select>
<p id="ticketOutput"></p>
<script id="ticketTemplate" type="text/x-jquery-tmpl">
{{if chosenTicket}}
You have chosen <b>${ chosenTicket().name }</b>
($${ chosenTicket().price })
<button data-bind="click: resetTicket">Clear</button>
Something went wrong with that request. Please try again.