Archive for the ‘Effects’ Category

Paper.js is an open source and "JavaScript + HTML5 canvas-powered" vector graphics scripting framework.

Besides being a wrapper for the "canvas", it has much more to offer like working with nested layers, groups, paths, compound paths, rasters, symbols, etc.


These items are handled and drawn automatically by Paper.js so you can focus on styling and/or modifying them.

It tries to use the code smartly for faster execution and less CPU usage.

The framework has methods for mouse and keyboard interaction. And, it has the well-known blend modes from Illustrator and Photoshop with JS emulation like: multiply, screen, overlay, soft-light, hard-light, color-burn, darken, lighten,  hue, saturation, luminosity, color and more.

Mashi is an open source JavaScript toolkit for creating timeline-based, Flash-like movies and complex animations using HTML, CSS + JS.

It is standalone, modular, object-oriented and lightweight. Additional plugins are only required for advanced usage.

In contrast to other animation tools,  Mashi uses a scene-based timeline. So you are not limited to a timeline divided into dozens of equal frames per second but you can split your timeline into self-contained and independent scenes at will.


The toolkit has an automated preloader which loads images used in advance for a better user experience.

Mashi has a "controls" module which provides buttons like "play" and "pause" with their logics and it works in all major browsers including mobile and tablet.

Although images are usually expected to be static elements, customizing them on the client-side (via JavaScript) can be very handy considering the ability to applying effects and changing them anytime while still keeping the original files.

vintageJS is a jQuery plugin that uses the HTML5 <canvas> element for adding a retro feel to images.

WRD Retro Logo

It has 3 ready-to-use effects (sepia, green, grayscale) and can be customized very easily by creating new presets with values like vignette, noise, desaturate, viewfinder and more.

The website of the resource also has a web-based editor for applying these effects any image instantly and downloading them.

jQuery.Easie.js is a plugin for the popular JavaScript framework for creating CSS3-like easing animations.

With the help of a web-based drag 'n' drop interface, it enables you to create the easing curve and generates the related jQuery + CSS3 code automatically.

jQuery Easie.js

This way, you can use the CSS easing code for supported browsers and the JavaScript code as a fallback.

The plugin is lightweight (2kb) and works pretty fast by using lookup tables.

CamanJS is a JavaScript image manipulation library that makes use of HTML5 <canvas> tag.

With a simple-to-use interface, advanced filters including saturation, contrast, gamma, brightness or exposure can be applied.

CamanJS JavaScript Image Manipulation

It has a layer system -similar to the ones in Photoshop or GIMP- that creates so many possibilities.

The library can be extended with new plugins and filters where a detailed "how-to" exists on that subject.

CamanJS is standalone, can be safely used with any other JavaScript libraries and also has a NodeJS-compatible version.