Home > Animation

Animation

Organic Shape Animations with SVG clipPath

Organic Shape Animations with SVG clipPath

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover. After playing with some on-scroll morphing background shapes, we wanted to explore some hover effects in this demo. By morphing SVG paths we can create …

Read More »

Grid Loading Animations with JavaScript & CSS

Grid Loading Animations with JavaScript & CSS

Today we’d like to share a set of simple, inspirational loading animations for grid items with you. The idea is to show some image grid items with a (subtle) animation after loading has finished. For the demo we have three slightly different grid layouts with different gutters and column numbers.

Read More »

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

rsSlideIt : jQuery 2D/3D Slideshow Transformations Plugin

Performs a smooth 2D/3D transition from one HTML element A to another element B. Features: Runs a single transition or a sequence of transitions; Transition effect is automatically computed between two slides; Fallbacks to browsers that do not support 3D transformations and CSS3 animations; Highly customizable: Any markup you want. …

Read More »

WebGL Scroll Spiral

WebGL Scroll Spiral

Today we want to show you some shader art made with WebGL. The idea is to create a decorative background effect by twisting images and hexagonal grid patterns smoothly on page scroll. The effect aims to be as light as possible on desktops or mobile devices.

Read More »

Ramjet : Animated Morph DOM Elements

Ramjet : Animated Morph DOM Elements

Morph DOM elements from one state to another with smooth animations and transitions. Ramjet makes it look like your DOM elements are capable of transforming into one another. It does this by cloning the elements (and all their children), transforming the second element (the one we’re transforming to) so that …

Read More »