What are the differences between different way to animate things?

[yellow1912]

I see that we can animate properties like this:

https://animejs.com/documentation/#propertyKeyframes

But we can also put them in timeline then animate each properties:

https://animejs.com/documentation/#cssProperties

What are the pros and cons of each approach? Is one way better than the other?

[cameralibre]

I think it's largely down to personal preference and the specific needs of your project, it's hard to say whether one way is 'better' than the other, and there's no reason for you to only use one approach. Try different methods out and see which makes the most sense for you. Maybe make a codepen and animate something simple in a couple of different ways.

For me, a timeline is useful when I'm animating multiple targets - if there's just one target, then you probably don't need a timeline, unless the animation is really long and complex.

If you have an anime timeline with a bunch of different elements, but you're going to animate a whole lot of changes in a row to one element (or group of elements) then it's worthwhile using keyframes within that timeline.

One major difference between animation keyframes and property keyframes is just how the information is presented - when you're working on a complex animation and you need to tweak things or refer back to parts that you worked on a while ago, you should be able to read your code and know what's happening. In some situations it may be easier to read complex animations grouped by property (property keyframes), in others it may be easier to see all properties together, arranged chronologically (animation keyframes). You can use either/both of these keyframe types within a timeline, and simple property: value pairs too.