Interactive Musical Instruments
By Mary Lou on
Experimental ideas for playful musical interactions powered by MIDI.js and the Web Audio API. Play instruments or make sounds by interacting with content. ...
animation
Tilt Hover Effects
By Mary Lou on
Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website. ...
Surf Report Template
By Mary Lou on
A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experim ...
Cubes Advent Calendar
By Mary Lou on
A 3D cubes Advent calendar with fun hover effects and background color animations. Clicking the boxes opens another content level with different element animations. ...
Inspiration for Letter Effects
By Mary Lou on
A set of inspirational letter animations for display typography effects powered by anime.js. ...
Line Maker: Animated Decorative Lines
By Mary Lou on
The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like 'Uber Brand Experience' and 'Details'. ...
Transition Effect with CSS Masks
By Robin Delaporte on
A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental! ...
Fancy SVG Letter Animation
By Mary Lou on
An experimental SVG letter animation based on the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett. Powered by Julian Garnier's anime.js. ...
Multi-Layout Slideshow
By Mary Lou on
A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js. ...
Above & Beneath: Featured Content Layout Effect
By Mary Lou on
A landing page template with a featured content section and background sounds that change according to the view. ...
Item Reveal Animations with SVG
By Mary Lou on
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js. ...
Multi-Layer Page Reveal Effects
By Mary Lou on
A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration. ...
Animated Heat Distortion Effects with WebGL
By Lucas Bebber on
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text. ...
The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js
By Karim Maaloul on
A tutorial that explores the basics of creating animated 3D scenes using Three.js. ...
Animated Animals in CSS and SVG
By David Khourshid on
Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals. ...
How to Create an Interactive Animated SVG Drum Kit
By Josh Ellis on
A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery. ...
Spring Loaders with Rebound and Canvas
By Claudio Calautti on
A tutorial on how to create a loading spinner made with inscribed polygons and animated with Rebound spring motion. ...
Creative SVG Letter Animations
By Luis Manuel on
An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way. ...
Icon Animations Powered by mo.js
By Mary Lou on
Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot "Like Animation" by Daryl Ginn. ...
Shazam-Like Morphing Button Effect
By Mary Lou on
A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg. ...
Animating an SVG Menu Icon with Segment
By Luis Manuel on
A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating S ...
Interactive Room Display
By Mary Lou on
An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia's Dribbble shot "Spaces". ...
Effect Ideas for Card Stacks
By Mary Lou on
Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element. ...
Elastic Progress
By Lucas Bebber on
An elastic SVG progress loader based on the Dribbble shot "Download" by xjw and implemented with SVG and TweenMax. ...