I think animations in particular are a little tricky because you can do a lot with CSS. Sometimes its hard to know when you need JS at all. Sometimes you can have animations without JS entirely. Others a thin layer of JS is used just to trigger ot turn them off etc. But once you get into the more complicated things (maybe from medium up to large?) you might need to do a lot more with JS.
If going full JS, as kirupa said,
requestAnimationFrame is going to be your main driver for your animation loop. Then a lot of what you’re probably going to be doing is either driving a timeline or doing some kind of property interpolation over time. How you do that is up to you; there’s not necessarily any one right way.
But also, if you’re not so interested in figuring it out yourself and just want to get it done, you may instead look to existing animation libraries that package things up in nice, easy-to-use APIs. Then you don’t have to worry about all the details and can just do things like
(example from https://animejs.com/)
There’s a lot you can do with off-the-shelf libraries. I personally don’t tend to write applications this way because I like getting my hands dirty and doing things from scratch because I can also learn a lot by doing that, but if you’re just looking to build things, you can look at what’s already been made to help you do it.
I just happened to be watching this recently (been getting a lot of GDC recommendations from youtube lately) where a guy was talking about a pretty slick looking app that he made using existing libraries pretty easily:
A lot of web applications today will use libraries or frameworks like Angular, React, or Vue. They help you manage components and data and things like that, but there’s still a lot of work you’d need to do. But there are other libraries built off of these which can do even more. It depends what you’re after and how much work you’re willing to put into it.