
Principles for smooth web animations - julianshapiro
https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29#.ra51rwso4
======
chrismorgan
The most important principle for current technologies is #1, “Don’t change any
properties besides opacity or transform!”

Hopefully everyone will start copying the approach Servo uses in its WebRender
engine which is basically treating the browser rendering as though it were a
game, using the GPU for rendering _everything_ ; therefore guidelines like
this become obsolete.

This applies to a slightly lesser extent with #2, “Hide content in plain
sight.” #3 is also obsolete in Servo, as is #7, mostly.

~~~
jjcm
Even if everything were GPU based, this would still be a good suggestion no?
The biggest reason I see to use "transform: translateX(n)" over "left: n" is
the transform doesn't make a call to reflow the content around it (unless
that's what you're going for). Even with GPU acceleration, transform will
still be more performant than standard positioning/sizing.

I've always followed this rule: Use transform unless you need reflows, then
use top/left/height/width.

~~~
sanxiyn
The thing is, reflow is not why using left is slow. If the element is
position: absolute, you don't reflow the whole page anyway.

CSS transform is used because render is slow. With Servo-like GPU
acceleration, render is not slow. Your suggestion would not be a good
suggestion because using transform would be an unnecessary premature
optimization then.

------
amelius
It is rather disappointing that with the current state of technology we need
to go through such hoops to get smooth animations.

Also, there is completely no handle on keeping the animations smooth as
webpages become more complicated and do (perhaps unrelated) updates while
animations are running.

------
Kenji
#11: Your user's browser has the final say in all matters of timing. Whatever
you do, ultimately, if the browser decides that something has to be computed
on your main JS thread while you are trying to hit frames and timings, you're
screwed. Source: Making multiple HTML5 games with the intention of having them
render at 60 fps and not missing a single frame.

~~~
paulirish
The reason why transform & opacity (via CSS animations) are always recommended
is because they can be done completely on the compositor thread without going
back to the main thread.

If you need to run every frame of animation from JS then, yes, you're screwed.
At least until [https://groups.google.com/a/chromium.org/d/topic/blink-
dev/Y...](https://groups.google.com/a/chromium.org/d/topic/blink-
dev/YlG2OvHgVaQ/discussion) & [https://github.com/flackr/compositor-
worker](https://github.com/flackr/compositor-worker))

~~~
Kenji
Thanks for the explanation. Yeah, I noticed that the hard way. I now moved off
JavaScript and went back to classic C++ game programming. I like it much more
at this lower level with fine-grained control.

------
oneeyedpigeon
OK, so _now_ I know why tweening's called that, and I feel like the biggest
idiot in the world :-/

~~~
crazygringo
There are so many of these, even in basic English. Like "discover" = un-cover.

~~~
clintonc
"another" = "an other"

~~~
kuschku
no-body, no-where, interrupt-able, etc

~~~
delinka
"no one" is two words.

Edit: corrected. But I can't delete? Oh, I have replies :)

~~~
kuschku
Thanks, replaced it with a better example.

------
dyeje
Google's Material motion guidelines are also great material for people looking
to use web animations.

[https://material.google.com/motion/material-
motion.html#mate...](https://material.google.com/motion/material-
motion.html#material-motion-what-makes-a-good-transition)

~~~
msarchet
this is literally in the article

------
TeeWEE
Wow i just went and logged in to
[https://gyrosco.pe/..](https://gyrosco.pe/..). Too many animations. Its
making me wait for content to show up, lots of animations everywhere causing a
lot of congnitive load. And an options to delete your account is not there.

I think animations are very much over used on that site. The article is fine.
But dont do too much animations! Keep congnitive load small!

------
ec109685
The article was awesome. I am not sure, however, the heavy animation helps
gyroscope.pe's user experience, though.

------
pier25
Off topic... but what are you using for JS animations these days?

I've been using GSAP for almost a decade since the Flash days.

------
aorth
Speaking of smooth animations, the blog post is hosted on Medium, and I've
always admired Medium's image zoom thing because it's so smooth!

------
idlewords
The smoothest animation is the one you don't do.

In the best case, web animations just cause bloat and burn through your
battery. In the (common) worst case, they stutter or break or cause things to
on the page to hang while they load.

Just don't do it. Your website doesn't need to look like a mobile app.

~~~
nevon
This is just patently false. Animations can give a sense of continuity and
context for the effect of your actions. For example, let's say that you have
an alphabetized list of people, and you want to add a person to the list by
putting their name into an input box above the list. If when you submitted the
name it just disappeared and appeared somewhere down the list, you would
likely not know what happened. If, however, there was a transition where you
saw the list adapting to the new data, you would be able to understand that
you added an item to it.

Sure, there are good and bad instances of animation, but to state that at best
it's a battery drain is just patently false.

------
simooooo
Very very nice article

