I know that you can force GPU acceleration to achieve smooth animation of elements across the screen by applying a transition to the 'transform' property, e.g.:
elem.style.transition = 'all 3s ease-out';
elem.style.transform = 'translateX(600px)';
But I was wondering what would happen if you replaced the second line with:
elem.style.left = '600px';
Would/could GPU acceleration kick in for the "left" (or "top") property, or does it have to be on the transform property? It seems to me that it should be GPU accelerate-able, but I can't glean a final answer from any of the documentation I've read.
It's not accelerated. You have to use the specific CSS3 properties for it to be accelerateable. I think you'll find these links interesting:
http://www.html5rocks.com/en/tutorials/speed/html5/
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
Does animating the value of a CSS3 transform with javascript rule out hardware acceleration?
The consensus I've gathered is that only the translate3d property is hardware accelerated on mobile devices such as Mobile Safari.
Further Reading.
Related
I wish to implement flow indicators on the links of my D3 graph, as in this block.
The block uses stroke-dashoffset keyframe CSS animation to achieve the flow, and while it looks good, CPU usage sits at almost 100.
I read that you can trick some browsers into triggering GPU acceleration by including certain CSS properties, but other sources indicated that this no longer works, and certainly I couldn't see any benefit when trying to add transform: translateZ(0); (for example).
I have been investigating other options, and I tried to implement a moving marker along a line, in this style. For only one marker performance is better, but when I added multiple performance was worse.
Is there another, more performant option for animating a marker down an SVG path?
Failing another approach, I will try adding controls to stop / start the animation, but that would be a last resort.
Thanks in advance!
It seems indeed that animating the stroke-dashoffset attribute causes a lot of calculations. The original example causes a CPU usage at around 50% when I open it in Firefox.
There's another approach that seems to give better results: manually increment the stroke-dashoffset and loop that using setInterval. Here's a proof of concept:
http://bl.ocks.org/kmandov/raw/a87de2dd49a21be9f95c/
Here's how I update the dashoffset:
var lines = d3.selectAll('.flowline');
var offset = 1;
setInterval(function() {
lines.style('stroke-dashoffset', offset);
offset += 1;
}, 50);
I know that it doesn't look very good but it (surprisingly) performs a lot better than relying on css animations or transitions. In Firefox I now get CPU usage at about 15%.
I can imagine that this approach won't perform very well if you have a lot of links, because the update will take too long. But maybe it's a viable hack for simpler use cases where you animate linearly a fixed amount of links.
I know that sometimes browsers will GPU accelerate a CSS transform. But when does that happen, and is there a way to force GPU acceleration for a smooth animation?
this article
Most modern browsers support GPU acceleration, but they only use it when they think a DOM element will benefit from it. The strongest indication is that a 3D transformation is being applied. So use the 3D-equivalent transform. For example, instead of transform: translateX(50px), use transform: translate3d(50px, 0, 0). See this article for more information.
You can use the css "will-change" property:
will-change: transform;
Some css properties which are GPU accelerated (not always):
filter
opacity
transform
I am making an app and realised that it is best to hardware accelerate animations.
I wanted to use jQuery animate enhanced, which works but I feel I want a better grasp on the whole idea of hardware acceleration:
When moving a div using top/left positioning for example using jQuery, will it automatically be hardware accelerated by adding transform: translate3d(0, 0, 0); ?
Will this hardware accelerate anything? Also, what about animation keyframes? Will you need to add a transform to an animation for it to be hardware accelerated?
Paul Irish wrote a great, in-depth breakdown of this very thing.
Usually 3d translation will trigger the GPU, if it doesn't, it's no big deal, it still works. Using translate over left/top coordinates is usually better performance-wise as well. I'm not sure about the animation keyframes part of the question though.
I went across change logs of MobileSafari in iOS 6 where it states:
WebKit no longer always creates hardware-accelerated layers for
elements with the -webkit-transform: preserve-3d option. Authors
should stop using this option as a way to get hardware acceleration
Does there exist any list of hardware accelerated CSS properties ?
These aspects of your document can be accelerated by the GPU:
General layout compositing
CSS3 transitions
CSS3 3D transforms
Canvas Drawing
WebGL 3D Drawing
More on this here http://www.html5rocks.com/en/tutorials/speed/html5/
Maybe this article will help toohttp://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
And this one http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
Paul Lewis & Paul Irish have a really good article about High Performance Animations.
"We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps."
4 things a browser can animate cheaply
Position - transform: translate(n px, n px);
Scale - transform: scale(n);
Rotation - transform: rotate(n deg);
Opacity - opacity: 0..1;
TranslateZ() or Translate3D() may be required.
Source: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
In CSS, you can force an element to always be hardware accelerated by applying a property like:
-webkit-translate: translate3d(0,0,0);
Is it possible to do the opposite? Apply a property that will make sure that item is never blended?
I don't know if there is a way to prevent it. But instead of using a translate3d, you could just do a plain translate which would not be hardware accelerated.
transform: translate(10px,10px)