slideshow

Diagonal Slideshow

By Mary Lou on August 28, 2018

A slideshow with a "diagonal" look and three visible slides. A decorative background element expands to fullscreen when opening the content preview. ...

Motion Reveal Slideshow

By Mary Lou on July 26, 2018

A simple image slideshow with a motion reveal effect when navigating between slides and a fullscreen details view. ...

Triple Panel Reveal Slideshow

By Mary Lou on June 26, 2018

A fullscreen image slideshow with lateral image previews and a reveal animation using TweenMax. ...

Glitch Effect Slideshow

By Mary Lou on March 13, 2018

A simple slideshow that uses the CSS Glitch Effect for the slide transitions. ...

Animated Fragment Slideshow

By Luis Manuel on February 21, 2018

A tutorial on how to create an experimental slideshow that animates in fragments. The slider is powered by the "Pieces" library, which was created for achieving inte ...

Animated SVG Frame Slideshow

By Mary Lou on November 15, 2017

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Different shapes can be used for creating a variety of styles. ...

Liquid Distortion Effects

By Yannis Yannakopoulos on October 10, 2017

A slideshow with liquid distortion effects in WebGL powered by PixiJS and GSAP. ...

Sliced Dual Image Layout

By Mary Lou on September 28, 2017

Some layouts with sliced background images, slideshow functionality and glitch effect. ...

CSS Grid Layout Slideshow

By Mary Lou on July 19, 2017

A slideshow where each slide has an individual CSS grid layout and a reveal effect when navigating. ...

Mirror Effect

By Mary Lou on January 4, 2017

Mirror effect as seen around the Web lately, i.e. on Corentin Fardeau's and Method's website. The idea is to mirror an image and animate it within the context of a s ...

Transition Effect with CSS Masks

By Robin Delaporte on September 29, 2016

A tutorial on how to use CSS Masks to create some interesting looking slide transitions. Highly experimental! ...

Multi-Layout Slideshow

By Mary Lou on August 10, 2016

A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js. ...

Elastic Circle Slideshow

By Mary Lou on January 27, 2016

A very simple content slideshow with circular slides and an elastic, bouncy navigation effect. Inspired by the Dribbble shot "Mobile Commerce Interface" by Bilal Mec ...

Interactive Room Display

By Mary Lou on November 10, 2015

An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia's Dribbble shot "Spaces". ...

Color Extraction Effect

By Mary Lou on June 4, 2015

A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js. ...

Perspective Mockup Slideshow

By Mary Lou on November 21, 2014

An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta's script. ...

Wobbly Slideshow Effect

By Mary Lou on October 24, 2014

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

By Mary Lou on June 26, 2014

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

By Mary Lou on June 11, 2014

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 ...

Inspiration for Item Transitions

By Mary Lou on March 18, 2014

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 i ...