Motion Reveal Slideshow

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

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

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

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.