On-Scroll SVG Filter Effect
by Manoela Ilic
Combining GSAP’s Scroll Trigger and Flip with a SVG Filter, based on a demo by Fabio Ottaviani.
Playground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
4 Exclusive Demos: Slideshows & Typographic Animations
by Manoela Ilic
Four distinct demos, from image slideshows to on-scroll typography and hover effects.
Gooey Cursor Effect
by Manoela Ilic
A fun gooey cursor background effect with SVG filters and CSS blend modes.
On-Scroll Pixelated Image Loading Effect
by Manoela Ilic
A recreation of the on-scroll pixelated image loading effect seen on Felicity Ingram’s website.
Ideas for Grid to Slideshow Switch Animations
by Manoela Ilic
Some ideas and inspiration for layout animations where we go from an irregular grid to a slideshow or alternative view.
Image Tiles Menu Animation
by Manoela Ilic
An animation featuring image tiles that transform into a full image when a menu item is clicked.
Grid View Switch Animation
by Manoela Ilic
A concept for a view switch animation from grid to slideshow.
Ideas for Pixel Page Transitions
by Manoela Ilic
Inspiration for “pixel” page transitions based on Niccolò Miranda’s animation.
Fullscreen Clip Animation
by Manoela Ilic
Some inspiration for clip-path animations where a fullscreen image moves into a row/grid of smaller images, morphing its shape along the way.
Double Image Hover Effects with Clip-Path Animations
by Manoela Ilic
Some ideas for hover effects using clip-path animations where the same image gets revealed in a creative way.
Some More On-Scroll Typography Animations
by Manoela Ilic
A second set of ideas for on-scroll typography animations.
Shuffling Typography Animation
by Manoela Ilic
A shuffling type animation with various effects for a geeky terminal look.
Rotating Twisted 3D Typography with Three.js and Shaders
by Yuri Artiukh
A brief exploration into how to twist and rotate text in 3D using Three.js and Shader magic.
On-Scroll Typography Animations
by Manoela Ilic
Inspiration and ideas for on-scroll typography animations that add an extra layer of creativity to a website design.
Tooltip to Gallery Transition
by Manoela Ilic
A concept for page transitions where a tooltip image animates to a gallery layout and fullscreen image.
Inline Layout Switch Ideas
by Manoela Ilic
Two ideas for animating images from an inline layout to a column or grid-based one.
Unreveal Effects for Content Previews
by Manoela Ilic
Some explorations of page transitions using covering elements and CSS clip-paths.
Smooth Panel Scroll Effects
by Manoela Ilic
An exploration of smooth panel scroll effects based on Margot Priolet’s website.
