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.
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
- The inspiration for effects and Layout comes from Bakhtiyar Sattarov
- Masonry by David DeSandro
- TweenMax and ScrollToPlugin by Greensock
- ScrollMagic and animation.gsap by Jan Paepke
- imagesLoaded by David DeSandro
- Images by Unsplash.com
- Font Poppins by Google Fonts
- Simple Loader by loading.io
- Umbrella icon made by Vectors Market from Flaticon are licensed by CC 3.0