How to Animate SVG Shapes on Scroll
In Tutorials, by Manoela Ilic
A short tutorial on how to animate SVG paths while smooth scrolling a page.
shape
16 posts
Shape Slideshow with Clip-path
In Playground, by Manoela Ilic
An experimental slideshow using clip-path to create shape transitions between slides.
Rotating Loading Animation of 3D Shapes with Three.js
In Playground, by Yuri Artiukh
Some rubber-like 3D shape rotations that are perfect for loading animations.
Real-time Multiside Refraction in Three Steps
In Tutorials, by Jesper Vos
In this tutorial you will learn how to make objects appear glass-like in three steps using Three.js.
Gradient Topography Animation
In Playground, by Manoela Ilic
An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.
Organic Shape Animations with SVG clipPath
In Playground, by Manoela Ilic
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.
On-Scroll Morphing Background Shapes
In Playground, by Manoela Ilic
A decorative website background effect where SVG shapes are morphing and transforming on scroll.
Grabbing Attention and Building a Moving Experience with Shape
In Articles, 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.
Designing the Dreaded Form: Getting Creative
In Articles, 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.
