Motion Reveal Slideshow

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

Today we’d like to share another slideshow with you. The idea is to have a bit more of motion when navigating between the slides and showing another preview part with a fullscreen image. The inspiration for the effect comes from Louis Ansa’s beautiful design, “Paradis – Reprise”. 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 slideshow shows a medium sized image in the center of the page. The title is also prominently placed in the center:

MotionRevealSlideshow_01

When navigating to the next slide, we cover the current image with a reveal element that’s of the same color like the background of the page. The next image, which is initially covered, will be revealed. We add some translations to the elements to create a bouncy motion.

MotionRevealSlideshow2

When the details arrow is clicked below the image, we slide the respective fullscreen image with its content up in the same uncovering fashion.

MotionRevealSlideshow_02

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

We hope you like this little slideshow and find it useful!

References and Credits

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 in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!