60 FPS Animations with CSS3

Re:60 FPS Animations with CSS3 by russellbeattie on Monday July 10, 2017 @03:39PM (#14738966)

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 figure out what was causing a stutter that appeared in an Android WebView, but not in the equivalent Chrome version on a Mac. It turned out that the desktop browser was doing an additional recalc in the middle of a bunch of other animations. I ended up slotting in a document.body.getBoundingClientRect() to force the recalc and make them work equivalently. You might think this would cause thrashing, but it actually smoothed things out. Crazy but true.

Also, CSS animations can "cancel" in odd ways... if I tell an element to translateX from a to b, then during the animation, tell it to actually go to c, some browsers will figure it out (most) and do the right thing, some will "start over", some will do wonky things with the speed (does it calculate the duration from the current position in between a and b, or from a?).

Don't get me wrong, CSS3 animations are great, but don't make the mistake that they "just work", because they don't.

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by paulddraper on Monday July 10, 2017 @08:58PM (#14740850)

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.

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by SOLAR_FIELDS on Monday July 10, 2017 @11:24PM (#14741359)

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

[ Parent | on HN ]

Re:60 FPS Animations with CSS3 by candiodari on Tuesday July 11, 2017 @08:28AM (#14743539)

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

[ Parent | on HN ]