I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Let's say you have a bunch of images you want to display, you have no idea how to do it in a right way and you want to find some cool code snippets or just an idea in the WWW Jungle. But all the solutions you found out there are just boring galleries that you have seen a hundred or a thousand times before on all other websites and you want just something unique or a little bit more creative. Well, the search is over and you are in the right place.

COIDEA - Playful Masonry Image Gallery

As we all know, image gallery will display a set of small images attached to a particular post or page. Readers can click on any image to launch different triggers for activating modal or a popup which holds a bigger version of the image or something else more creative. As we all know, too, we have several choices for how a gallery will be displayed in your post: a thumbnail grid layout, a tiled mosaic-style layout, or in a slideshow. I choose thumbnail grid layout and created it with the beautiful free javascript libraries such a masonry - javascript grid layout library, TweenMax - javascript library for high-performance HTML5 animation in all major browsers and ScrollMagic - javascript library for magical scroll interactions.

With those three libraries, I made this experiment which collects a few creative animations. With ScrollMagic I created animation which executes on the scroll and gives this example feeling of the "flying in thumbnails" from the bottom and "flying out thumbnails" at the top of demo page. With Masonry, I created our responsive image gallery grid which starts by default with four columns for large screens and reduces to the two columns for small screens. With GSAP's TweenMax, I created smooth scrolling for the page and our thumbnail animation which happens on click on the thumbnail as well as on the hover. First I show only thumbnail holders which hold the number of thumbnails and headline. On click, we rotate clicked item and show the image in the background as well as "read more" information with the fictitious price of the image. Hover trigger holds the only animation for our area with the fictitious price.

I hope you liked my playful masonry image gallery and find it inspiring and useful!

References and Credits