SVG Filmstrip Technique for creating UI animations

Page created by Jared Wein, using an asset created by Eric Pang.

Step 1: An SVG is created with pre-rendered frames in a film-strip manner. The viewport is simulated below by the solid charcoal border. The "animation window" is simulated below by the dashed red border.

Step 2: The SVG is translated using CSS transforms with a step-function equal to the number of frames in the film-strip.

Step 3: The viewing window where the animation is seen has CSS overflow:hidden set on it to hide the other frames. The viewing window must have height and width equivalent to the size of a frame of the animation.

This shows the above animation at the desired animation-duration.