tw-rl

besides the technical stuff like making sure you're animating css values that are GPU accelerated (most animation libraries will handle this anyways), can share some tips from back in the day when I studied motion design:

M. Gschwandtner @OnlyPain_ctrl@_EricHu how is this do smooth 10/10 twitter.com

90% of it is timing and easing, if you're animating UI, I'd keep http://cubic-bezier.com handy. Personally, I'm biased towards this type of curve: a fast acceleration to start then a super sudden smooth drop in speed. i can share some tips on bezier curves from designing fonts:

Bezier curves: something that font designers are taught is also good advice for animating UI, svgs or anything with bezier curvature is paying attention to the "handles" of a curve. There's a few things in this screen shot of by @OHnoTypeCo that are worth calling out

1. The handles are in straight 90 or 0 degree angles. 2. The handles on one end of the curve and the next are roughly the same length, (what font designers call "balanced handles") 3. The handles won't cross paths (i'll explain)

In font design, these aren't rules you have to stick to, there's many cases where you may break this in drawing letters but 90% of jankiness in drawing letters breaks one of those things. simpler shapes will adhere to this way more often

The crossing paths thing I mentioned here's an example of a similar curve, one that crosses paths and one that doesn't and I'll explain what that means:

if you extended the handles with an imaginary line on each end and their tips would touch, that tends to result in less headaches. If the lines cross perpendicularly, that can mess up the smoothness of your curve by a lot

@OHnoTypeCo 's blog has a great article for further reading on this, in this example below, ("If you draw a line connecting two points, and then a line connecting two handles, the two lines will often be parallel, or pretty close.") https://ohnotype.co/blog/drawing-vectors

Again, these aren't rules, but more like observed relationships. Bezier curves used to visualize the mathematics of a slope vs drawing letters have their nuances but understanding this relationship will absolutely help you get the curves you want

Also not saying good animation = easing. so much more than that but with web animation, understanding easing goes a long way. for a more general understanding of basic animation principles, i would look into 12 principles: https://www.youtube.com/watch?v=yiGY0qiy8fY