Diagonal Thumbnail Slideshow Animation

Original Source: http://feedproxy.google.com/~r/tympanus/~3/ikLcNlTo_vM/

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!

The post Diagonal Thumbnail Slideshow Animation appeared first on Codrops.