Diagonal Thumbnail Slideshow Animation

A simple slideshow with tilted thumbnails and large titles that animate when navigating.
DiagonalThumbnailsSlideshow_featured

The other day I saw this very nice Dribbble shot by Anton Tkachev and couldn’t help but envision it as a slideshow with some large typography. So I went ahead and did a small demo which then turned into an exploration of several animations for the image tiles and the texts.

So the main idea is to animate the tilted thumbnails out of the viewport when navigating to the next or previous slide. While the thumbnails move out, the titles get animated too, in that reveal/unreveal fashion that seems to be quite trendy now. The direction of the motion depends on wether we’re navigating back or forth.

The animations are powered by GreenSock’s GSAP animation library.

I’m totally in love with IvyMode and this demo was just a perfect excuse to use Jan Maack’s typeface again!

The images used in the demos are by generative artist Manolo Ide who offers his artwork for free.

I really hope this gives you a starting point for exploring more effects!

Tagged with:

Mary Lou

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.

http://www.codrops.com

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

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.