Take advantage of GPU-accelerated animations

jaukia / zoomooz

An easy-to-use jQuery plugin for making zooming web pages.

http://janne.aukia.com/zoomooz/

1.79k stars 275 forks source link

Take advantage of GPU-accelerated animations #91

Closed liamnewmarch closed 4 years ago

liamnewmarch commented 10 years ago

I noticed zoomooz uses 2D transforms and was wondering if 3D transforms would yield smoother animation. Typically 2D transforms are processed by the CPU, whereas 3D transforms can be offloaded to the GPU.

This could be implemented by specifying a zero Z parameter to translate3d:

transform: scale(1.2) translate(3px, 4px) // fallback for non 3D capable devices
transform: scale(1.2) translate3d(3px, 4px, 0) // take full advantage of the GPU

There are pros and cons, and it would be useful to have an option that turns 3D transforms off, but I think this is worth considering.

fallenartist commented 10 years ago

ehausen commented 10 years ago

Does this plugin even work with 3D and perspective (the CSS perspective property)? I tried setting perspective for a parent container and then rotating the child element slightly. Then I tried clicking the element but nothing happened and the console gave me error:

Uncaught TypeError: Cannot read property 'modulus' of undefined jquery.zoomooz.min.js:1 Problem with setMatrixValue d ["1", " 0", " 0", " 0", " 0", " 0.866025403784439", " 0.5", " 0", " 0", " -0.5", " 0.866025403784439", " 0", " 0", " 0", " 0", " 1"]

m-emelchenkov commented 10 years ago

Replacing operations with 3D will not work correctly with WebKit due its bug (in case of 3D it scales area as bitmap, not as image/text).