Playground
The Playground features web experiments, concepts, and layouts that push the boundaries of traditional design and showcase the latest in animation techniques.
Reflection Scroll Effect
by Manoela Ilic
A decorative reflection effect where we simulate a reflected page and scroll it along with the content.
On-Scroll Revealing WebGL Images
by Yuri Artiukh
An exploration of on-scroll reveal effects for images in WebGL, using React Three Fiber.
On-Scroll Animation Ideas for Sticky Sections
by Manoela Ilic
Some ideas of how sticky sections can be animated while exiting the viewport.
Experimental CSS-Only Carousels with Scroll-Driven Animations
Three carousel experiments made with CSS scroll-driven animations, based on Francesco Zagami’s designs.
Experimental On-Scroll Text Animations with SVG Clip-Path
by Manoela Ilic
Some experiments with on-scroll typography effects using SVG clip-paths.
On-Scroll Sliced Text Animation
by Manoela Ilic
A scroll-triggered sliced text animation, where segmented elements reunite while scrolling.
3D Glass Portal Card Effect with React Three Fiber and Gaussian Splatting
by Yuri Artiukh
Explore the creation of a 3D glass portal with React Three Fiber, with optimized rendering using Gaussian Splatting and integrating real-world objects.
On-Scroll Shape Morph Animations
by Manoela Ilic
Scroll-driven shape morph animations with tilt interaction inspired by the effect seen on KPR.
Dynamic Tooltip Reveal Animations
by Manoela Ilic
A dynamic tooltip animation with various reveal effects, comprised of different amounts of fragments appearing.
Image Layer Animations with Clip-Path
by Manoela Ilic
Some ideas for speedy page transition animations with layered images using clip-path.
Ideas for Image Motion Trail Animations
by Manoela Ilic
Some ideas for mouse/touch responsive animations where images are shown along the path of the user motion.
Some Ideas for Fullscreen Image Slideshow Animations
by Manoela Ilic
A collection of ideas for slideshow animations on fullscreen images.
Connected Grid Layout Animation
by Manoela Ilic
Some ideas for simple on-scroll animations on “connected” grid layouts.
On-Scroll Column & Row Animations
by Manoela Ilic
Some inspiration for scroll-driven animations on column and row items.
On-Scroll Perspective Grid Animations
by Manoela Ilic
On-scroll animations for perspective image grids with different layouts.
Grid Flow Animation
by Manoela Ilic
A loading and navigation animation where thumbnails “flow” into a grid.
