round / enhance.js

Not maintained. Zoom & dynamically crop images. Based on http://github.com/fat/zoom.js by @fat.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Low performance due to width/height animation

marcinlichwala opened this issue · comments

https://github.com/ROUND/enhance.js/blob/master/js/enhance.js#L199-L203

The whole benefit of using Velocity.js is effectively killed by animating the paint/layout-triggering CSS properties.

Should be changed to transform-based animations only.

Good read: https://aerotwist.com/blog/flip-your-animations/

Unfortunately, the only way to achieve dynamic image cropping is to transition the dimensional values of the image element.

But, you are right – on elements where the img is being resized there is a an approximate increase of 300% in paint time.

Any ideas on how to overcome this?