Animated Heat Distortion Effects with WebGL
by Lucas Bebber
A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on images and text.
+ moreTutorials
In this section, you will find a variety of in-depth articles written by skilled front-end developers that cover a range of web development and web design techniques.
The Making of “The Aviator”: Animating a Basic 3D Scene with Three.js
A tutorial that explores the basics of creating animated 3D scenes using Three.js.
+ more
Animated Animals in CSS and SVG
Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals.
+ more
How to Create an Interactive Animated SVG Drum Kit
by Josh Ellis
A tutorial on how to create an animated and interactive SVG drum kit with GSAP and jQuery.
+ more
Spring Loaders with Rebound and Canvas
A tutorial on how to create a loading spinner made with inscribed polygons and animated with Rebound spring motion.
+ more
Polaroid Stack to Grid Intro Animation
by Manoela Ilic
A tutorial on how to create an intro animation where a decorative Polaroid stack becomes a grid similar to the effect seen on the takeit website.
+ more
Shazam-Like Morphing Button Effect
by Manoela Ilic
A tutorial on how to create a Shazam-like button that morphs into a music player using Snap.svg.
+ more
Animating an SVG Menu Icon with Segment
by Luis Manuel
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 SVG paths.
+ more
Shaded Progress Bars: A CSS/Sass Exercise
A tutorial on how to create some interesting 3D progress bars with CSS/Sass. Discover how to use box shadows and gradients to create realistic looking skins.
+ more
How to Create a Fullscreen Video Opening Animation
A tutorial on how to create a video opening animation inspired by the effect seen on momentsapp.com.
+ more
Styling & Customizing File Inputs the Smart Way
A tutorial on how to style and customize <input type=”file”> in a semantic, accessible way using the <label> element and some JavaScript.
+ more
Creating Material Design Ripple Effects with SVG
An in-depth tutorial on how to build the ripple effect outlined under Google Material Design’s Radial Action specification and combine it with the powers of SVG and GreenSock.
+ more
Motion Blur Effect with SVG
by Lucas Bebber
A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.
+ more
Prism Effect Slider with Canvas
A tutorial on how to create a slider with a “prism” effect using HTML5 canvas globalCompositeOperation and a layering technique.
+ more
Creating a “Jump Loader” Animation with SVG and GSAP
by Chris Gannon
Learn how to create a playful “Jump Loader” animation with SVG and GSAP.
+ more
Playful Trampoline Effect
by Manoela Ilic
A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tribute to Leonard Nimoy.
+ more
How to Create (Animated) Text Fills
by yoksel
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
+ more
Sliding Header Layout
by Manoela Ilic
A tutorial on how to create a simple layout with a fullscreen header that slides up to reveal a content area with an image grid.
+ more