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.

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.

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.

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 https://neilorangepeel.com/tag/tanz-io/