5 ms·

>I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... setInterval isn't the problem. He's animating

>I was wondering why the animation was so stuttery and then I saw they are using setInterval for the animation... setInterval isn't the problem. He's animating the CSS position (top, left), which triggers a full reflow and causes the stuttering. Always animate with translate3d, which is GPU accelerated.

tantalor 7y ago
Ooh you could even animate with a css transition from one bounce to the next with a linear curve; then you don't run any JS per frame, only at the bounces.
- augusto-moura 7y ago
  The problem I think is that transitions have fixed amount of time, both long and short travels finish with the same amount of time giving a different velocity of movement. Also executing Javascript every frame is not that heavy
  - jbroman 7y ago
    Executing JavaScript every frame is not that heavy, but if the main thread is blocked because of something that is, which may even be in another tab, the animation will stutter. The animations built into the platform can run and remain smooth under a broader range of conditions, which is why they should be preferred if you don't need the level of control that running script via requestAnimationFrame gives you.
- deleted 7y ago
  [deleted]
ajflores1604 7y ago
As someone who's new to front end and css is there a good resource on what properties are more costly, or which functions are newer and meant to be more performant like translate3d is mentioned as being gpu accelerated? I've seen mentions of reflow, repaint, and layout thrashing but not a comprehensive list of what functions are meant to replace what other ones, or relative cost of each function in common use cases. I've managed to grasp javascript fairly easily coming from python, but css seems like this obscure black box that I thought would be much easier to get a handle on.
- ly 7y ago
  I have no great answer to your question, and you might know this already, but while translate3d is indeed newer, it’s not a “new more performant” replacement for positioning with top/left using the position property. It’s just another property which can sometimes be used to do what you could earlier only do with ‘position:’, but there are still many cases (the majority) you position things using the “old” position property. They have different uses, and for that reason one also requires a reflow while the other does not.
- glitchdout 7y ago
  opacity and transform (translate, scale, rotate and skew). That's mostly it. https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://www.html5rocks.com/en/tutorials/speed/high-performan...
- aphextron 7y ago
  >I've managed to grasp javascript fairly easily coming from python, but css seems like this obscure black box that I thought would be much easier to get a handle on. All I can say is use it, a lot. CSS skills are more of a dark art than anything resembling engineering. And the only way you get good is by trial and error, learning what works best and why.
- earthboundkid 7y ago
  The key to animation on the web is to at all costs avoid using JavaScript to manipulate a DOM object on a tight timer. To achieve a smooth animation, you need between 24fps and 120fps depending on the device, so between 43 and 8 milliseconds to get everything done. Doing DOM stuff that fast is going to be a headache compared to using CSS animation or even using the Canvas API.
jayflux 7y ago
This looks like it’s just 2D so translate() would be enough, almost all of the functions under transform are GPU accelerated.
- nathancahill 7y ago
  Yes, they are now. Initially, only translate3d was accelerated so there's a lot of code that uses that still for 2D animation.
ricardobeat 7y ago
That is not correct. setInterval is definitely the main issue here, especially with a 30ms delay, 33 or 16 would at least give it a chance to sync with refresh rates. Absolutely positioned elements do not trigger reflow, as the element is removed from the normal document flow [1]. See my example in another comment. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position#ab...
- aphextron 7y ago
  Regardless of whether there is a reflow, translate() allows you to do subpixel animation [0]. It will always be smoother than animating CSS position [1]. [0] https://css-tricks.com/tale-of-animation-performance/ https://css-tricks.com/tale-of-animation-performance/ [1] https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ https://www.paulirish.com/2012/why-moving-elements-with-tran...
  - ricardobeat 7y ago
    > It will always be smoother Once you're hitting 60fps there is no difference in smoothness regardless of method. But in reality, it looks better if you avoid subpixel values, as the image will flicker slightly; the frames not aligned with the pixel grid will suffer blur or distortion. Try setting speed to 0.1 in the example to see it wobble. The effect is noticeable even on hi-dpi screens. Not saying you should animate anything using position these days, CSS transforms are certainly the right tool.

tantalor 7y ago

Ooh you could even animate with a css transition from one bounce to the next with a linear curve; then you don't run any JS per frame, only at the bounces.

augusto-moura 7y ago
The problem I think is that transitions have fixed amount of time, both long and short travels finish with the same amount of time giving a different velocity of movement. Also executing Javascript every frame is not that heavy
- jbroman 7y ago
  Executing JavaScript every frame is not that heavy, but if the main thread is blocked because of something that is, which may even be in another tab, the animation will stutter. The animations built into the platform can run and remain smooth under a broader range of conditions, which is why they should be preferred if you don't need the level of control that running script via requestAnimationFrame gives you.
deleted 7y ago
[deleted]

ajflores1604 7y ago

As someone who's new to front end and css is there a good resource on what properties are more costly, or which functions are newer and meant to be more performant like translate3d is mentioned as being gpu accelerated? I've seen mentions of reflow, repaint, and layout thrashing but not a comprehensive list of what functions are meant to replace what other ones, or relative cost of each function in common use cases. I've managed to grasp javascript fairly easily coming from python, but css seems like this obscure black box that I thought would be much easier to get a handle on.

ly 7y ago
I have no great answer to your question, and you might know this already, but while translate3d is indeed newer, it’s not a “new more performant” replacement for positioning with top/left using the position property. It’s just another property which can sometimes be used to do what you could earlier only do with ‘position:’, but there are still many cases (the majority) you position things using the “old” position property. They have different uses, and for that reason one also requires a reflow while the other does not.
glitchdout 7y ago
opacity and transform (translate, scale, rotate and skew). That's mostly it. https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://www.html5rocks.com/en/tutorials/speed/high-performan...
aphextron 7y ago
>I've managed to grasp javascript fairly easily coming from python, but css seems like this obscure black box that I thought would be much easier to get a handle on. All I can say is use it, a lot. CSS skills are more of a dark art than anything resembling engineering. And the only way you get good is by trial and error, learning what works best and why.
earthboundkid 7y ago
The key to animation on the web is to at all costs avoid using JavaScript to manipulate a DOM object on a tight timer. To achieve a smooth animation, you need between 24fps and 120fps depending on the device, so between 43 and 8 milliseconds to get everything done. Doing DOM stuff that fast is going to be a headache compared to using CSS animation or even using the Canvas API.

jayflux 7y ago

This looks like it’s just 2D so translate() would be enough, almost all of the functions under transform are GPU accelerated.

nathancahill 7y ago
Yes, they are now. Initially, only translate3d was accelerated so there's a lot of code that uses that still for 2D animation.

ricardobeat 7y ago

That is not correct. setInterval is definitely the main issue here, especially with a 30ms delay, 33 or 16 would at least give it a chance to sync with refresh rates. Absolutely positioned elements do not trigger reflow, as the element is removed from the normal document flow [1]. See my example in another comment. [1] https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute https://developer.mozilla.org/en-US/docs/Web/CSS/position#ab...

aphextron 7y ago
Regardless of whether there is a reflow, translate() allows you to do subpixel animation [0]. It will always be smoother than animating CSS position [1]. [0] https://css-tricks.com/tale-of-animation-performance/ https://css-tricks.com/tale-of-animation-performance/ [1] https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ https://www.paulirish.com/2012/why-moving-elements-with-tran...
- ricardobeat 7y ago
  > It will always be smoother Once you're hitting 60fps there is no difference in smoothness regardless of method. But in reality, it looks better if you avoid subpixel values, as the image will flicker slightly; the frames not aligned with the pixel grid will suffer blur or distortion. Try setting speed to 0.1 in the example to see it wobble. The effect is noticeable even on hi-dpi screens. Not saying you should animate anything using position these days, CSS transforms are certainly the right tool.