From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like to share some fancy animations for thumbnails in a grid with you. There are many possibilities when it comes to these kind of effects, but not all of them fit well when applied to multiple items, like a grid of images. There is not much space and we have to consider the stacking order of the items for the effects to look nice. An interesting thing is that we can play with delays, intensifying the viewing pleasure of the whole thing. Not only can we apply the delays in order, but randomly or reversed.
The beautiful illustrations used in the demos are by talented Isaac Montemayor.
Please note that we’ve created a dummy script for navigating through the images. Needless to say, this is not a script for managing images.
In the demos we use an unordered list with images wrapped in an anchor. Depending on the class of the list, we’ll apply a certain effect. The next set of images will be inserted into the list items which means that we’ll have two anchors in one list item.
An example for an effect is the following “scale and rotate”. The active class will trigger the animations and the first anchor will disappear with the “scaleRotateOut” keyframes. The tt-empty is used to indicate if an item was previously empty. So in that case we don’t want this anchor to disappear:
/* Scale and rotate */ .tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:first-child { animation: scaleRotateOut 0.6s forwards; }
The second, new anchor will appear with another animation. In case the item was empty, we don’t have a second child, but only one. So we need to cover these cases, too:
.tt-effect-scalerotate.tt-effect-active li a:nth-child(2), .tt-effect-scalerotate.tt-effect-active li.tt-empty a { opacity: 0; animation: scaleRotateIn 0.6s forwards; }
If there is a new anchor being added to an item, we just want to fade it out:
.tt-effect-scalerotate.tt-effect-active li:not(.tt-empty) a:only-child { animation: fadeOut 0.6s forwards; }
For the effect to look nice, we don’t want the bottom row items to overlap the upper row ones, so we’ll set the right z-index for the first and second row:
.tt-effect-scalerotate li:nth-child(-n+3) { z-index: 2; } /* order for correct overlapping */ .tt-effect-scalerotate li:nth-last-child(-n+3) { z-index: 1; }
And finally, we define the animations:
@keyframes scaleRotateOut { 100% { opacity: 0; transform: scale(0); } } @keyframes scaleRotateIn { 0% { opacity: 0; transform: translateX(50%) translateY(100%) rotate(25deg); } 100% { visibility: visible; opacity: 1; transform: translateX(0%) translateY(0%) rotate(0deg); } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The animations will of course only work in browsers that support them. IE10 does not play along very well with some of them due to a serious bug related to using percentages for transforms.
I hope you enjoy these effects and find them inspiring!
Great job Mary
Nice ! Thanks for sharing.
Really inspiring as always
Amazing! I love it.
i never can stop to say… YOU ARE AMAZING GIRL !!!!!
Thanks for sharing.
yeah aggree with u, AMAZING GIRL ;))
ohhhh thumbnail grid, how can I adding some description when mouse hovering on you.
Staggering animations, well done!
I especially like Front Row, Stack and Slide.
Also, I noticed that you dropped jQuery and you’re using native js, like querySelectors. Big thank you and appreciation for that too.
Great job Mary, wonderful animations
Thanks for sharing!
Really nice!
Great work!!
Waiting for an design for FAQ Pages..
Is there any random animation when you select circles?
By the way, “stack” is my favorite. =)
Awesome! Many Thanks
I will use effect from html9 in my next projects! I love how u use css3
Simple and smooth art ! ๐
incrรญvel! ๐
Awesome Animations as always ๐
Very nice
They are all great examples. Very creative, ML. Thanks for taking your time to share your ideas with us.
This is lovely!
I will use it for my portfolio.
Thanks guys, you are absolutely the best!
Great work guys.. Thank you
Great work !! All I found here is awesome !!
Great Work Mary , Mary Lou Rockzzz again……….
Another awesome by Mary Lou, thank you!
waouh, super sympa
Merci
Nice post Mary Lou
cant wait to implement on my gallery. nice trick
Wow!!
๐ I am in love!!!
I wonder if I can implement this into wordpress….
Your images is fix in file js code, i can’t change this to show all my images in database. Bad ideas
Hi Mary I just want to say thank you for your consistent tutorials, I always come here for the most advanced stuff that is pushing the web forward. Amazing site and tutorials thank you!!
I know may be a dumb quest but how can I implement a lightBox to the image after using this plug???
I mean using multiple jQuery to a same element. Im just googlering it and I do not get a clear answer and makes me doubt about if its possible to use multiple jQuery plugs to same element
Hi,
if we have next prev option would look more great!!!
this is a nice post and very helpful can this slider be onload instead of onclick?
Hey buen aporte, y muchas gracias. esta espectacular….!!
:3
Hello i was wondering how i can put more images inside of this gallery :)??