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.

By in Playground on
Demo Code

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

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Creating an Animated Displaced Sphere with a Custom Three.js Material

Grid Displacement Texture with RGB Shift using Three.js GPGPU and Shaders

On-Scroll Animation Ideas for Sticky Sections

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 17

Comments are closed.

  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.

  8. Demo 4 would be way cooler if it didn’t swipe away like that! Super cool otherwise though.

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