I first created polyClip.js so I could combine the lossy compression algorithm of JPEGs with the ability to have a transparent area that PNGs allow. The result works well in all browsers, but can polyClip.js be fast enough to change the clipping area on-the-fly and even animate it at reasonably fast speeds with CSS3-style transformations on the clipping areas. The answer is a resounding yes and it is really fast even in older IE as well. This article will discuss in doing this with polyClip and a related library, Silk.js to do battery friendly and CPU efficient HTML5 animations.
CARVIEW |
Select Language
HTTP/2 200
content-type: text/html; charset=UTF-8
x-ws-ratelimit-limit: 1000
x-ws-ratelimit-remaining: 999
date: Wed, 15 Oct 2025 01:43:58 GMT
server: Apache
x-powered-by: PHP/8.3.26
link: ; rel="https://api.w.org/", ; rel="alternate"; title="JSON"; type="application/json"
content-encoding: gzip
requestAnimationFrame
Skip to Main Content
Skip to Main Navigation
User Agent Man ·
Discoveries of a Client Side Web Developer
Categories
Entries Tagged as 'requestAnimationFrame'
Cross-Browser Animated Image Masking (Even in IE) Using polyClip.js
January 14th, 2013 by zoltan · No Comments
Tags: animation · canvas · HTML5 · Images · JavaScript · jQuery · requestAnimationFrame · transform
© 2009 - 2025 — Zoltan "Du Lac" Hawryluk