Lenticular Cat Animation

Lenticular animation is typically created using clever lenses and printing techniques, I wanted to recreate the effect on the web using the same principles.

How it works

Take an animation and split it into frames. The cat I used for example, this one works particularly well as it’s a silhouette and a pretty recognisable shape that happens to loop well.

Frame by frame of a running cat silhouette.
Running cat animation, split into frames.

Then I painstakingly split each frame into 1px slices (I first tried 5px slices but I lost too much detail, I’m still not sure of the perfect math formula) Then place them in order 1234,1234,1234 until you complete the image.

Lenticular cat
The slices of the cat animation placed together in order to make a lenticular image.

The magic happens when you mask each frame one at a time and move it from one to next. To do this we need to make a grid.

Lenticular grid revealing 1 frame in every 11.
Lenticular grid revealing 1 frame in every 11.

Then when you move the masking layer over the sliced image it give the impression that the image is moving.

I’m hoping to use this technique on my tanz.io project which you can read more about here http://neilorangepeel.com/tag/tanz-io/

One Comment

Leave a comment or reply on Twitter @_neilorangepeel.

  1. Awesome stuff!
    Thanks so much for sharing.

Leave a Reply