Transition Effect with CSS Masks
In Tutorials, by Robin Delaporte
A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental!
slideshow
Multi-Layout Slideshow
In Playground, by Manoela Ilic
A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js.
Item Reveal Animations with SVG
In Playground, by Manoela Ilic
An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.
Elastic Circle Slideshow
In Playground, by Manoela Ilic
A very simple content slideshow with circular slides and an elastic, bouncy navigation effect. Inspired by the Dribbble shot “Mobile Commerce Interface” by Bilal Mechairia.
Interactive Room Display
In Playground, by Manoela Ilic
An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia’s Dribbble shot “Spaces”.
Zoom Slider
In Blueprints, by Manoela Ilic
A simple content slider with depth-like zoom functionality for a predefined area in each slide.
Color Extraction Effect
In Playground, by Manoela Ilic
A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js.
Prism Effect Slider with Canvas
In Tutorials, by Claudio Calautti
A tutorial on how to create a slider with a “prism” effect using HTML5 canvas globalCompositeOperation and a layering technique.
Playful Trampoline Effect
In Tutorials, 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.
Sliding Header Layout
In Tutorials, 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.
Perspective Mockup Slideshow
In Playground, by Manoela Ilic
An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script.
Wobbly Slideshow Effect
In Playground, by Manoela Ilic
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh’s Dribbble shot and was made using Snap.svg and morphing SVG paths.
Draggable Dual-View Slideshow
In Playground, by Manoela Ilic
An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed.
How to Create a Tiled Background Slideshow
In Tutorials, by Manoela Ilic
A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations.
Inspiration for Item Transitions
In Playground, by Manoela Ilic
Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations.
Tilted Content Slideshow
In Tutorials, by Manoela Ilic
A tutorial on how to recreate the slideshow seen on the FWA landing page with 3D effects involving random animations.
Sliding Horizontal Layout
In Playground, by Manoela Ilic
A slider-like layout where the neighboring sections are positioned horizontally next to each other.
Interactive Particles Slideshow
In Playground, by Francesco Trillini
An interactive particles slideshow experiment built with HTML5 Canvas.
