Grid Reveal Effects with Anime.js

Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
GridRevealEffects_featured

From our monthly sponsor: HelloSign API: Everything IT wants and developers love. Try it free today.

Recently, a new version of anime.js was released. One of the great new features is its staggering system that makes complex follow through and overlapping animations really simple. We wanted to give it a try and experiment with this new feature on an image grid with many thumbnails. We’ve created four demos, each with a different staggering effect that hides and shows small images to reveal some content underneath.

Attention: Note that this is highly experimental and that we use modern CSS properties that might not be supported in older browsers.

If you want to learn more about staggering in anime, you can check out the great documentation: Staggering in anime.js

In the first demo, we make the thumbnails disappear from the point where we clicked and then reverse this animation when closing the full view.

GridRevealEffects_00

GridRevealEffects_01

In the second demo, we fade and scale the thumbnails down. Not from the center though but from the edges. We also make the thumbnails appear again in the same way when closing the full view.

GridRevealEffects_02

The third demo shows how to make the items disappear towards the bottom right corner.

GridRevealEffects_06

The last demo is a more playful example: here we let the thumbnails “fall down”. When closing the view, we make them show again by moving them upwards.

GridRevealEffects_04

We hope you like these effects and find them useful!

References and Credits

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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.