Animated Image Pieces

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

Animated Image Pieces was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants