TremulaJS: Displaying Images as „Mountain“, „Turntable“ or in the Pinterest Look
The framework provides different ways in which you can have your images displayed. For instance, there is the „Mountain“ view, where images are arranged in a circular shape. However, only a section of the circle is displayed. This means that the pictures are arranged in an arc shape that is just labeled as „Mountain.“ Another form of presentation is the „Turntable“ format. Here, images are folded in from either left or right. A classic multi-column arrangement, as known from Pinterest, is also possible.
In total, there are six different ways to shape your images. The different ways are presented very nicely on a demo page.
Also, there are a plethora of other settings that can be used to make further adjustments to your gallery. This way, you can customize the presentation size of the images, as well as the number of lines and columns. The „Mountain“ format can consist of multiple images arranged below instead of only next to each other. It allows you to create format filling galleries that are responsive.
Animations with an Impulse
Besides the different ways of presentation, TremulaJS also knows to impress with its animation effects. Via mouse movement or swipe gestures the gallery is set in motion. Depending on the way of depiction, the images are either rotating in a circle („Mountain“), folded into the viewport („Turntable“), or only moved horizontally or vertically.
In a lot of cases, the mouse movement or gesture is exactly translated when it comes to these animations. TremulaJS, however, simulates physical impulse forces to create a natural-seeming movement. This means that when the gallery is set in motion with a lot of momentum, it will start moving at an equal speed, and it will take the according amount of time. It will then slowly stop moving.
The „Mountain“ view creates a similar effect that kicks in when the wheel starts spinning. Because of the animation trying to resemble physical forces, the navigation through the gallery is very intuitive and the animations are very pleasant.
Load Infinite Images Thanks to JSON
The single images of a TremulaJS gallery are not individually set in the HTML source, but loaded by the framework via a JSON object. Only a „<div>“ element has to be put in the HTML body. This serves as a placeholder for the gallery.
This approach allows you to use the Flickr API to load images via JSON and display them in a separate gallery. As the pictures are not anchored in the source, not all images of the gallery need to be loaded at once. That’s why there is the option to lazy-load pictures. Thus, galleries with hundreds of images are no problem.
In the TremulaJS demo, you can see how fluent and clean the movement is displayed even with many pictures loading.
First, the HTML element you want the gallery to be placed in has to be defined. The many configuration parameters are handled by an object literal.
Workable Source in CodePen
The loading of the images is done through custom features that are programmed individually. That’s why I don’t present any code snippets here. However, there is a relatively comprehensible demo on CodePen, which shows the loading of Flickr images. Here, you can get used to the framework and try out a bunch of different things.
The complexity of TremulaJS is also reflected in its dependencies to other libraries. It requires the framework jQuery, and the plugins Hammer.JS and jsBezier. While Hammer.js is responsible for the implementation of swipe gestures on mobile devices, jsBezier is needed to make the animation work on curves like on the circle of the „Mountain“ view.
TremulaJS allows for the creation of format filling galleries that are fun to use due to neat and efficient animations. While bringing it to work requires a bit of an effort to be put in, it is certainly worth it if you desire more than a classic image carousel or something similar everyone already has.
TremulaJS is taken care of by Garris Shipon and Art.com Labs. It is provided on Github under the liberal MIT license and may be used for both private and commercial projects as well as customer work.