Triple Panel Reveal Slideshow

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

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:

RevealSlideshow_01

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.

RevealSlideshow

We hope you enjoy this demo and find it useful!

References and Credits

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.