Posts Categorized / Animation & Effects


Barba.js: A plugin for page transitions

Barba.js is a lightweight and dependency free javascript plugin to create fluid and smooth transitions between your site pages. It uses PJAX to enhance the user’s experience. Coded by by Luigi De Rosa. It helps reducing the delay between your pages, minimising browser HTTP requests and enhancing your user’s web experience. get it here


MocKit – HTML iPhone 6 mockups

MocKit is a ready-made iPhone 6 mockup kit built with HTML and CSS. Customisable colours, size and always retina ready. Created by @colinkeany. get it here


Expandable Project Presentation

The real power of CSS Transitions is in allowing a smooth passage from point A to point B. The user is driven through the change, he is not presented with an immediate new result. It’s these extra keyframes that make it possible to create pleasent motion-like web experiences. get it here


3D Rotating Navigation

Sometimes you just want your website navigation to be bold. Design agencies, for example, use their portfolio to show off their skills and push a little usability standards. Another good example is mobile apps: animated elements are key ingredients of the user experience. In this case a 3D menu can’t just be fun. It has […]


jQuery Ripples-A simple WebGL-based ripple effect.

By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Maybe also by touch, though I haven’t tested that. Important: uses the WebGL extensions OES_texture_float and OES_texture_float_linear. Works only with same-origin images (unless the image has the Access-Control-Allow-Origin header set appropiately). get it here


Triangloid – A Slice of Imagnoid

Triangloid is a JavaScript library that can trianglifies images and outputs as SVGs. It has been inspired and based on Trianglify by @qrohlf. get it here



A simple and easy jQuery plugin used to add page transition on css animations. get it here


PatternBolt-SVG Pattern Background with CSS

PatternBolt is a fine selection of SVG pattern background, packed in a single CSS or SASS (scss) file, just include the css file in your project and add a class to your element to insert a pattern. You can change color palette changing the background-color of your element and the pattern size changing the background-size […]