# Animations: Use CSS or CSS-in-JS?

Canonical: https://davidk.dev/talks/animations-use-css-or-css-in-js/
Video: https://www.youtube.com/watch?v=BuNksQ5PkxM
Speaker: David Khourshid (@DavidKPiano), creator of XState
Type: Interview · Event: Prismic · Year: 2021 · Duration: 9:22 · Views: 779 (as of 2026-10-19)
Topics: CSS & animation

## Summary
We can be tempted to only animate using CSS but there are times where you would want to use CSS in Javascript for animations in order to control your animations.

## Key takeaways (quoted from the transcript)
- There are times where you would wanna use JavaScript animations, and maybe even some JavaScript framework in order to control those animations. (1:00)
- Usually, with things dynamics, such as that people will quickly realize, okay, there's just absolutely no way I could do this with CSS. (3:00)
- In like years ago, when I tried to do clip animations with transform, like where you would use the clip path property, and then transform it, browsers didn't like that at all. (8:00)

## Chapters
- 0:00 Introduction
- 5:00 If you have many layers and top of each other…
- 8:00 Actually, this is a chrome only thing right now…

## Transcript
[0:00] - so David, we're coming to the I don't know how many videos I am not counting them (David laughs) probably six or seven anyway, one of the topics that are always confusing is like, you can animate things with CSS, and you can animate them with JavaScript. And sometimes you say, like you have in mind, like, okay, I should absolutely use CSS because you know, it will be performant and all these good properties and browser will be able to optimize and all that, and then you go all the way CSS and then you find out like, it's not exactly that it's not exactly the best way.

[0:00] I mean, there's some corner cases where it's not good at all. And then the other side, you say, like, Oh, I want to use JavaScript, because at least I control what's happening, and I can optimize it myself. I can't just rely... I don't want to rely on magically browser, optimizing things. - right - so I would rather control things, and I know how I'm doing things, and I'm sure about it. So and there is a whole continuum between these two, like, what's your advice?

[1:00] How would you deal with that? - so that's a very good question. There's CSS animations, and I love trying to see if I could do things only with CSS animations as much as I can. But there are times where you would wanna use JavaScript animations, and maybe even some JavaScript framework in order to control those animations. One of those would be the more dynamic animations. So CSS animations are good for two things.

[1:00] The first one is transitions. If you're going from one state to another state, you could say it should be this opacity, or this transform style in this state, and maybe a different color or different opacity or whatever, in another state, and CSS will just magically transition between those two states. However, in JavaScript, if you want to dynamically animate something, for example, based on where your finger is moving, or where in the scroll position is, then you're going to need to use JavaScript for that.

[2:00] And so that's where frameworks such as GSAP, Framer Motion and things like that come to mind. - and I'd like to ask you questions, because you have some experience, and maybe you have these kind of cases can you think of cases where you see often people trying to abuse one or the other? And you're like, and you would like to advise like, no, here, probably not good use of CSS or not a good use of JavaScript, like cases where you see often happening and people trying to abuse or thinking that is the right thing and it's not? - Oh, absolutely.

[2:00] So a lot of what you need to do in the animation can be done with CSS. And so, I would encourage... you the other use of CSS animations is keyframes as well. And so keyframes are more for timeline animations. And so a lot of people will jump to an animation framework such as GSAP GreenSock in order to create those timeline animations, and GSAP is good for a lot of things such as SVG animations, but a lot of people tend to use GSAP for even the small things such as hovering over a button, and so they would maybe add a mouse over something like that, and that's just not needed all the time. - right, so that's for when you can use like keyframes and CSS. - exactly - right. - yeah and do you think of cases where people are trying absolutely do something in CSS where it's like, it's much better to use the JavaScript in that case? - yeah - you mentioned the mouse, following your mouse, but very loosely, can you think of other things? - yeah.

[3:00] Usually, with things dynamics, such as that people will quickly realize, okay, there's just absolutely no way I could do this with CSS. So it's not a question of whether I should do it in CSS, it's just, I can't - yeah - so then you would move to JavaScript. But even then, there's something called the web animations API. And so that's needed to JavaScript, it's supported in, I think all of the modern browsers, you have Safari, edge, Chrome, Firefox, all supporting it to some level.

[4:00] It's not fully supported everywhere, though, but it is very useful for actually getting that needed CSS animation performance via JavaScript. So then you could have the best both worlds' dynamic animations, but with the performance of CSS, and moving it off the main thread. - so when you speaking about performance, it made me think, can people count always when using CSS they will have things optimized or like this is not completely true? because you talked for instance, about animating with and noodle positions and he said like, this is not good. you will not always get good performance out of CSS animation. - right, there's always a cost.

[5:00] So, for example, if you're moving your animations over to the GPU, it might feel faster but you have to remember that there's not only a memory cost, but there's the, you know, cost of the GPU in order to just communicate back to the CPU in order to draw the thing.

[5:00] And so if you have many layers and top of each other, then you're gonna have maybe not the smoothest animation experience, or you might experience this your laptop fans will go crazy. Because it's like, oh, it's really working hard to calculate all these animation frames, or your phone, your phone doesn't have fans but your phone exhibits stress in another way, which is decreased battery time. So you're really stressing the battery life and reducing it by having heavy animations and CSS. - right, so basically, you said that when the GPU and CPU have to communicate, it's costly? - yeah. - so basically, that's when you're trying to change to make a lot of transitions or a lot of state transition in a small amount of time, that means that you're going to GPU use back to CPU use, this one example. - it's more like if you're trying to animate a lot of things at the same time.

[6:00] Then there's so many different layers that the GPU has to keep track of, which is, you know, expensive, both for computation and for memory. - and how do you have a capsule curve method or way to test to make sure that you're not running into these kind of problems? How would you test or what's your workflow for testing? - so there's profiling with that tools, but the way that I like to test most, my eyes and my ears, if it's junky, or if I hear my laptop fans running, then I know, okay, this might not be the most performance animation.

[6:00] But there are also techniques where you could open your dev tools and you could profile and you could see flame graphs to see just how much calculation the browser is doing in order to make those animations performance. - right, so basically, sometimes you can run something and you feel like it's, you know, fluid and it's good. but what about the other browsers, which are the browsers that often will behave differently for performance of CSS animations? - so I'm not too sure about that all browsers are going to perform similarly, but the real variable is it depends on the user's device. - device - if the user is on a lower powered phone or the user has an older computer, then animations might not perform too well. - but its GPU optimizations similar in different browsers? - yes, yes its going yo be - okay.

[7:00] Already that, you know. - right. - that's changed a lot in the last years. - it did, it used to be a lot different. For example, I just released a CodePen where I made the CSS cyber truck where that really stresses the GPU because I have so many different layers, transition are transformed in all these 3D ways, and they're also animating at the same time.

[8:00] So there's a lot going on, and so depending on the browser that might have a different, you know, effects, I know that in Firefox, it looks a little bit different than Chrome. In like years ago, when I tried to do clip animations with transform, like where you would use the clip path property, and then transform it, browsers didn't like that at all. It just completely glitched, and now it's a lot smoother, but that's definitely changed over the years. - and we've put the link to that animation that you did.

[8:00] And you also animated the window. - yeah, yeah, so if you, if you click the windows, there will be a glass shattering animation right on there - how did you do that. What's the secret? - the secret... Actually, this is a chrome only thing right now, but it's a property called conic gradients. And so you could think just like - how conic then? - linear gradient or radial gradients except you could define just based on the angle so in a circular fashion and you could do a different color for each one.

[9:00] And so that makes it easy to have a sort of shattered look. - nice - yeah. - thank you very much, David. - thank you.