{"id":311126,"date":"2020-05-15T09:20:37","date_gmt":"2020-05-15T16:20:37","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=chapters&p=311126"},"modified":"2021-10-06T07:53:03","modified_gmt":"2021-10-06T14:53:03","slug":"squigglevision","status":"publish","type":"chapters","link":"https:\/\/css-tricks.com\/books\/greatest-css-tricks\/squigglevision\/","title":{"rendered":"Squigglevision"},"content":{"rendered":"\n

Squigglevision a (real!<\/em>) term for animation where the lines appear to squirm around, even when the object\/scene is at rest. It\u2019s part of the iconic look of shows like Dr. Katz, remember that?<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

Quite a unique look! It\u2019s even patented<\/a>. But the patent talks about five edited images and displaying them in “rapid succession”. Wikipedia<\/a>:<\/p>\n\n\n\n

In order to create the line oscillation effects that characterize Squigglevision, Tom Snyder Productions’ animators loop five slightly different drawings in a sequence called a flic.<\/p><\/blockquote>\n\n\n\n

On the web, if we had to animate five (or more) images in rapid success, we’d probably do it with a step()<\/code>-based @keyframes<\/code> animation and a sprite sheet. Here’s a great example of that by simuari that shows exactly how it works, with the sprite sheet on top (10 images combined into 1) and the animation below.<\/p>\n\n\n\n