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

71–79 of 79 posts

Re: 60 FPS Animations with CSS3

#71

Post by pcwalton »

fulafel wrote: post #68
pcwalton wrote: post #29

Earlier quoted context omitted.

> 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?

Computing whether a pixel is filled requires computing its winding number, which depends on every path before it on the scanline. This is not a problem for a sequential algorithm, since you compute winding numbers as you go, but it is a problem if you want to fill every pixel in parallel.

Re: 60 FPS Animations with CSS3

#72

Post by uwu »

myfonj wrote: post #63
michaelchisari wrote: post #52

Earlier quoted context omitted.

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…

`transition: none` breaks pages relying on the "transitionend" js event (edit: and i guess the other transition-related events i forgot about), i noticed logging into google wouldn't work with it (it wouldn't hide some gray overlay)

here's what i use instead:

  /* forgot if this was needed but i think using !important here broke something */
  transition-property: none;
  
  /* maybe not needed */
  transition-delay: 0!important;
  
  /* non-zero to support "transitionend" event */
  transition-duration: 0.0000001s!important;
  
  /* possible tiny optimization */
  transition-timing-function: linear!important;
i don't know if `animation` has events associated with it but i haven't came across any sites breaking without them

Re: 60 FPS Animations with CSS3

#73

Post by candiodari »

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…

Meanwhile 60fps animations using any technology other than web is entirely ... unimpressive.

Re: 60 FPS Animations with CSS3

#74

Post by solidr53 »

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...

GreenSock's TweenMax is pretty good

Re: 60 FPS Animations with CSS3

#75

Post by dfshorty »

Sohcahtoa82 wrote: post #60
rootedbox wrote: post #6

Earlier quoted context omitted.

I can't actually tell if you are being sarcastic.. As he actually has a point. If you're spending your time getting to make your hamburger work past 30 fps; then you may need to rethink priorities.

For a simple web app, yeah, I'd agree that trying to get over 30 fps is pointless, especially on mobile where I'll be concerned about battery usage. But for gaming, anybody that can't tell the difference between 30 fps and 60 fps is blind. I have a 144 hz monitor, and I can certainly tell the difference even between 60 fps and 144 fps. The UFO Test [0], while contrived, will show you the difference. If you have a 60…

It could be some kind of placebo effect, but I know the difference between 60 and 150+ fps even on 60hz screens. At least I'm sure I can feel it when gaming.

Re: 60 FPS Animations with CSS3

#77

Post by jhasse »

Double_a_92 wrote: post #76
jhasse wrote: post #57

Never buy a >= 120 Hz monitor. Everything else will start lagging :(

I have one. Didn't notice any lagging. What are you talking about?

I meant that after you're used to it, you'll start to notice "only" 60 FPS. Also animations which are capped at 60 FPS will interpolate badly to 144 Hz.

But it isn't the case with the technique described in the article (browsers also render with more than 60 FPS if the monitor refresh rate is higher), so my comment was a bit offtopic, sorry.

Re: 60 FPS Animations with CSS3

#78

Post by Sohcahtoa82 »

dfshorty wrote: post #75
Sohcahtoa82 wrote: post #60

Earlier quoted context omitted.

For a simple web app, yeah, I'd agree that trying to get over 30 fps is pointless, especially on mobile where I'll be concerned about battery usage. But for gaming, anybody that can't tell the difference between 30 fps and 60 fps is blind. I have a 144 hz monitor, and I can certainly tell the difference even between 60 fps and 144 fps. The UFO Test [0], while contrived, will show you the difference. If you have a 60…

It could be some kind of placebo effect, but I know the difference between 60 and 150+ fps even on 60hz screens. At least I'm sure I can feel it when gaming.

It is 100% placebo because a 60 hz screen can only render 60 fps. If you're getting 150 fps, then if you're playing with V-Sync enabled, only 2 of every 5 frames is being shown to you. The other three are being thrown out, never reaching the monitor. If V-sync is disabled, then you're only seeing about 2/5ths of every frame with a tear in the screen when the next frame was shown, causing rendered objects to shear.

Re: 60 FPS Animations with CSS3

#79

Post by myfonj »

uwu wrote: post #72
myfonj wrote: post #63

Earlier quoted context omitted.

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…

`transition: none` breaks pages relying on the "transitionend" js event (edit: and i guess the other transition-related events i forgot about), i noticed logging into google wouldn't work with it (it wouldn't hide some gray overlay) here's what i use instead: /* forgot if this was needed but i think using !important here broke something */ transition-property: none; /* maybe not needed */ transition-delay: 0!importan…

This is insightful remark; I guessed it could break some presumably crappy designs blindly relying on transition-state or such, but … Google? Wow. Even considering their approach to user level style sheets [1] it is mildly surprising.

Side note: perhaps using `..duration: ..ms` in and `transition-timing-function: step-start;` could make some additional micro optimisation.

[1] killed it: https://bugs.chromium.org/p/chromium/issues/detail?id=347016

Post reply on HN