How to Animate SVG Shapes on Scroll
by Mary Lou
A short tutorial on how to animate SVG paths while smooth scrolling a page.
+ more#shape
Shape Slideshow with Clip-path
by Mary Lou
An experimental slideshow using clip-path to create shape transitions between slides.
+ more
Rotating Loading Animation of 3D Shapes with Three.js
Some rubber-like 3D shape rotations that are perfect for loading animations.
+ more
Infinite Hyperbolic Helicoid Animation with Three.js
A coding session where you'll learn how to create an infinite shape animation of a hyperbolic helicoid using Three.js.
+ more
Real-time Multiside Refraction in Three Steps
by Jesper Vos
In this tutorial you will learn how to make objects appear glass-like in three steps using Three.js.
+ more
Gradient Topography Animation
by Mary Lou
An organic SVG shape layer animation based on Diana Hlevnjak's work "Gradient Topography". Powered by anime.js.
+ more
Organic Shape Animations with SVG clipPath
by Mary Lou
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.
+ more
On-Scroll Morphing Background Shapes
by Mary Lou
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
+ more
Grabbing Attention and Building a Moving Experience with Shape
by Patrick Cox
Some thoughts on how shapes in web design can be used for attention-grabbing purpose and for an interesting or even comforting user experience.
+ more
Designing the Dreaded Form: Getting Creative
by Patrick Cox
In this follow-up article about designing forms we'll dig into how to actually become creative and apply some interesting design concepts to spice up your form.
+ more