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: T

[Rockridge]

Photonの新デザインで採用されるアイコンアニメーションのテクニックを説明したデモ。帯状のSVGファイルとCSS transformsを組み合わせて表示領域のアイコンを変化させ、領域外はoverflow:hiddenで隠すというもの。