Archive for the ‘Effects’ Category

SeuratJS is a plugin for the powerful Raphaël that enables us to create vivid animations and pixelated artwork.

It extracts the color information from any given image and rebuilds it in SVG with the modifications applied.

The plugin works cross-browser and can be customized with various settings (like the shape of the brush being used to re-generate images).


Photon is a JavaScript library which can add simple lighting effects to any element in the 3D space.

In order to create the effect, it uses the WebKitCSSMatrix object (WebKit is the only supported browser engine).

The angle of the light can be defined and changed anytime with the provided functions.


It is possible to define the objects to be lighted one-by-one or group them at once and we can customize the effect by setting the max black + white usage.

P.S. The effects can be resource intensive if over-used.

Almost every web designer/developer has an experience with Flash (good or bad). And, we remember how its keyframe animation engine works: you define the states of an object in any number of keyframes you wish and it handles the animation/transformation between them itself.

And, there is CSS3 @keyframe animations (CSS-Tricks has a great article on it) where the main logic is all similar but you animate an element with CSS properties.

Rekapi is a library which brings keyframe animations to JavaScript. It allows us to define the objects, keyframes, animations and control the state of the scene (play, pause, stop).

Rekapi - JavaScript Keyframe Animations

The drawing of elements is not part of the library and that process can be accomplished by the favorite solution of each developer.

Also, Rekapi can export your DOM animations to CSS3 @keyframes for enhanced performance

It is very well documented, supports a wide list of browsers and works with Node.js too.

CSS3 transitions are great and they allow us to create many stuff that we used to see only in JS.

However, compared to JavaScript alternatives, they are not flexible enough in easing functions and, even cubic-bezier (although it is pretty powerful) has its limitations.

Morf.js, is a Javascript work-around for hardware accelerated CSS3 transitions with custom easing functions including bounce, spring, elastic and much more.


Once an easing function is triggered through JavaScript, it is created using webkit-keyframes.

The library uses Shifty.js for tweening regular CSS properties and it is WebKit only.

You'll remember Scrollorama, the popular jQuery plugin for creating chic scrolling effects.

There is now a superior version named SuperScrollorama by the same developer which offers more and complicated animations.

It makes use of the feature-rich TweenMax and the Greensock Tweening Engine (make sure you check its license before using) for accomplishing the effects.


Similar to an animation app, it allows us to add tweens and timelines to it, targeting when an element appears in the viewport or at a specific scroll point.

The website of the resource shows its flexibility and there is a short-yet-enough documentation provided.