Triple Panel Reveal Slideshow

Original Source: http://feedproxy.google.com/~r/tympanus/~3/qynS_pAghHk/

Today we’d like to show you a little slideshow design with a “triple panel” layout. The infinite slideshow shows a preview of the next and previous slide on both sides of the page. When navigating we use a reveal effect for all three images and animate the titles. The animations are powered by TweenMax.

The demo is kindly sponsored by monday.com: The visual project management tool for designers. If you would like to sponsor one of our demos, find out more here.

Attention: Note that we use modern CSS properties that might not be supported in older browsers.

The image slideshow has two lateral previews and a main image in the center. When hovering over the “Explore” link, the main image will zoom in a bit:

When navigating, we animate a reveal element that covers each image. Depending on which direction we are navigating, we make the revealer appear from bottom or from the top. All title elements have an animation except for the “Explore” link.

We hope you enjoy this demo and find it useful!

References and Credits

Images from Unsplash.com
TweenMax by Greensock
imagesLoaded by Dave DeSandro
Building icon designed by Freepik

Triple Panel Reveal Slideshow was written by Mary Lou and published on Codrops.