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.
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
Full Image Reveal Effect