Animated Image Pieces

A set of experiments with an animated image pieces effect where an image gets shattered into rectangular fragments. Powered by anime.js.
AnimatedImagePieces_Featured

After making the Developer/Designer Page Layout Concept we wanted to try out some different effects for the pieces animation on the image. There are quite a lot of possibilities to animate the fragments, so we made some demos showing the different effects. The animations are powered by anime.js.

The demo is kindly sponsored by NomNom. If you would like to become a demo sponsor, you can find out more here

Attention: In these highly experimental demos we use some modern properties like CSS Flexbox, CSS variables, the new CSS grid layout and filter without fallbacks.

Note that Safari seems to be a serious party pooper when it comes to performance.

Have a look at the different demos:

AnimatedImagePieces_01

AnimatedImagePieces_02

AnimatedImagePieces_03

AnimatedImagePieces_04

We hope you enjoy these examples 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

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.

Feedback 15

  1. 6

    Manoela: The Ballerina works for me. I just don’t like it that all these work does not work on IE. I still love you though.

  2. 14

    The Ballerina is perfect for about page. Ok – Only one rack is missing for ie and edge – Tanks

Follow this discussion

Leave a Comment