Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

60 FPS Animations with CSS3

medium.com

Post reply on HN
Print view View original

61–70 of 79 posts

Re: 60 FPS Animations with CSS3

#61

Post by kllrnohj »

kuschku wrote: post #56
kllrnohj wrote: post #55

Earlier quoted context omitted.

I think your confusing the RenderThread with GPU layers. There's only 1 rendering thread per app and it handles all rendering work done by that app. It's really no different than pre-M rendering other than a chunk of what used to be on the UI thread is now on a different thread. The general flow is the same. The new part is that some animations (basically just the Ripple Animation) can happen on their own on that thr…

> but it doesn't use a GPU layer for it nor a different OS composition layer. Really? As so often, there was a lot of talk about doing that beforehand, and it wasn’t discussed at all later on, so I had assumed that this had been done. Interesting that this didn’t happen. What’d be the reason for that? Animating objects on a static background seems a prime case for GPU layers. Or was it the issue with the framebuffer…

Think about what the static background actually is. It's probably either an image (which is already just a static GL texture, no need to cache your bitmap in another bitmap), or it's something like a round rect which can actually be rendered faster than sampling from a texture (since it's a simple quad + a simple pixel shader - no texture fetches slowing things down). In such a scenario a GPU layer just ends up making things slower and uses more RAM.

Re: 60 FPS Animations with CSS3

#62

Post by halokonrad »

michaelchisari wrote: post #52
jdauriemma wrote: post #48

This article was useful and concise. I urge web developers to consider the trade-offs when using CSS hardware acceleration. Properties like `will-change` or `transform3d` substantially increase the client device's energy usage. This has battery-life implications for users on portable devices such as laptops, tablets, and mobile phones. As with any other feature, ask "why" before "how" when prioritizing interactive mo…

A nice feature would be to add an "energy saver" option to your web app, which adds a class to your app and a stylesheet that disables all animations.

There is actually a draft of media query called "reduced motion" that tells webpage that user prefers to have animation use set to minimum. It wasn't created to save energy but to help people that feel dizzy when too much of animation is going on. https://webkit.org/blog/7551/responsive-design-for-motion/#u...

Other nice to have option would be to just force disable rendering all animation by browser itself.

Re: 60 FPS Animations with CSS3

#63

Post by myfonj »

michaelchisari wrote: post #52
jdauriemma wrote: post #48

This article was useful and concise. I urge web developers to consider the trade-offs when using CSS hardware acceleration. Properties like `will-change` or `transform3d` substantially increase the client device's energy usage. This has battery-life implications for users on portable devices such as laptops, tablets, and mobile phones. As with any other feature, ask "why" before "how" when prioritizing interactive mo…

A nice feature would be to add an "energy saver" option to your web app, which adds a class to your app and a stylesheet that disables all animations.

In user styles capable browsers you can disable CSS3 animations pretty easily, just using

    *, *::before, *::after
    {
      transition: none  !important;
      animation: none !important;
    }
(For not-so-capable browsers using author level pseudo-user-style sheets the `star` must have raised specificity, like `:not(#\0)`.)

I used this in the past when I wanted to play 2048 as fast as possible, resetting also border-radius, text-shadow, box-shadow, text-rendering, image-rendering and background-image [1]. It really made quite a difference :]

[1] https://userstyles.org/styles/103878/nofx

Re: 60 FPS Animations with CSS3

#64

Post by wfunction »

jdauriemma wrote: post #48

This article was useful and concise. I urge web developers to consider the trade-offs when using CSS hardware acceleration. Properties like `will-change` or `transform3d` substantially increase the client device's energy usage. This has battery-life implications for users on portable devices such as laptops, tablets, and mobile phones. As with any other feature, ask "why" before "how" when prioritizing interactive mo…

> Properties like `will-change` or `transform3d` substantially increase the client device's energy usage

They also made the font blurry on Chrome on Windows prior to DirectWrite (it's moot now, though personally I'll say that I hate the use of DirectAnything for simple font rendering).

Re: 60 FPS Animations with CSS3

#65

Post by paulddraper »

russellbeattie wrote: post #45

Animations via CSS have been a challenge in my experience. It's easy to create a demo with a single layer of DOM elements and have it work well, but as soon as there is overlap of any sort, lots of DOM elements to manipulate, or things like images or media, it can get twitchy real fast. In addition, every browser and every platform is different in rand ways. I was doing testing on a scrolling carousel and couldn't fi…

Similar experiences.

CSS3 animations are cool because they have the potential to be superior, but 3 out of 4 times it seems that the equivalent JS/$.animate is smoother and more consistent.

It's the not the reality I want, but it's the one I've been shown.

Re: 60 FPS Animations with CSS3

#66

Post by SOLAR_FIELDS »

paulddraper wrote: post #65
russellbeattie wrote: post #45

Animations via CSS have been a challenge in my experience. It's easy to create a demo with a single layer of DOM elements and have it work well, but as soon as there is overlap of any sort, lots of DOM elements to manipulate, or things like images or media, it can get twitchy real fast. In addition, every browser and every platform is different in rand ways. I was doing testing on a scrolling carousel and couldn't fi…

Similar experiences. CSS3 animations are cool because they have the potential to be superior, but 3 out of 4 times it seems that the equivalent JS/$.animate is smoother and more consistent. It's the not the reality I want, but it's the one I've been shown.

It's very situational. I built a rich SPA with lots of animations a few years ago and sometimes I would have no issues and other times animations would chug on one or two browsers. I haven't done animation work in the past couple of years but I used GSAP for that product and it was great. It's very tough to navigate the animation world because fades work great in context A on FireFox but work like crap in the same context on Safari. You might see the opposite on context B with a different animation.

Hopefully in a few more years we will see better and more consistent performance across all browsers, but we aren't quite there yet with CSS

Re: 60 FPS Animations with CSS3

#67

Post by c-smile »

Ideally so called rendering tree should reside completely on GPU. Or at least all heavy rendering components that it represents shall be there.

In this case each animation frame will be just a set of commands sent by CPU to GPU: render thing A at coordinate Ax,Ay, render thing B at ...

So animations that do not involve relayout will cost almost nothing for CPU. And even with relayout ( transition: width 2s; ) it will not be that bad as relayout is partial as a rule.

At least this is how it works in Sciter: https://sciter.com/sciter-and-directx/ (demo of Sciter HTML/CSS rendering integrated into DirectX scene)

Re: 60 FPS Animations with CSS3

#68

Post by fulafel »

pcwalton wrote: post #29
kllrnohj wrote: post #19

Earlier quoted context omitted.

It's either just using SVG at all that's the problem or something in the SVG that's a problem. SVGs are generally not GPU rasterized since GPUs are really not built for paths. That's a whole research area in and of itself. There are things you can attempt depending on your browser, though, such as avoiding non-convex paths in the SVG. If you want good performance everywhere though the only real option is just don't u…

> SVGs are generally not GPU rasterized since GPUs are really not built for paths. That's a whole research area in and of itself. It's not so much that GPUs aren't built for paths as that winding rules are not suited for parallelism. The solution is to use meshes instead of paths. This is my current area of work.

Do you mean the non-zero rule and even-odd rules? In the WP definition they don't inherently seem to have side effects or dependencies on previous computations, can you link to an elaboration?

Re: 60 FPS Animations with CSS3

#69

Post by runeks »

whowouldathunk wrote: post #8
amelius wrote: post #2

I hope browser vendors take note and make this guide obsolete.

This guide will be relevant until OS compositors fundamentally change from just dealing with bitmaps. Which is unlikely to happen anytime soon. And doing UI layout on background threads breaks the basic design of pretty much every UI framework, web or native, which are usually single-threaded.

> This guide will be relevant until OS compositors fundamentally change from just dealing with bitmaps. Which is unlikely to happen anytime soon.

A browser is essentially a small OS with server-side rendering, where clients/web apps send HTML/CSS/JS for their GUI and the compositor/browser engine renders into bitmaps. We probably need something simpler than HTML/CSS/JS, though, if we want it to be reasonably easy to implement a fast rendering engine.

Re: 60 FPS Animations with CSS3

#70

Post by Fifer82 »

iMuzz wrote: post #26

On a slightly unrelated note: Can anyone recommend a good SVG animation course that I could take. Or a set of guides that walk you through doing SVG animations / typical workflows. I took this[1] course over the weekend and didn't find it very helpful because of a lack of code walkthroughs. [1] - https://www.lynda.com/Web-Development-tutorials/Advanced-SVG...

On a related note, are Lynda courses still absolutely dire?
Post reply on HN