I don't think the example of the trophy in the article is a good use case this days, you could draw that trophy as a SVG and animate the flames with GSAP or something, or draw each flame frame as a <symbol> and animate that with CSS.

First, the most important signal that any animation provides is this: the computer is doing this for you. This goes in the negative too: if you click and drag a file icon, the drag sprite may be translucent or highlighted somehow, but it should not 'animate' to your mouse cursor. The file icon should be attached to the cursor location with no delay.

However, suppose you drop it somewhere it can't go. The interface should then animate the file back to where it belongs; that's the computer 'putting it back'. Now, the timing function; how should the file go back? Slowly back away from the cursor? Accelerate to the return location, then slow back down again? No, it should very quickly snap away from the cursor, then settle where it belongs. You'll notice things like this as part of fit and finish; they are communication.

The man coming from the left eased in and then slowly stopped. This is profoundly wrong, like a person sneaking out of a dark place, then slowly coming to rest in front of you staring into your eyes, it is very much threat behavior. You want the person to come in a friendly way, so he can sell you something or convince you to smash the subscribe button. The correct animation is to simply appear halfway in, far enough you can see his smile; stop for 0.5s, indicating he is occupying the space; then slowly ease-in-ease-out the rest of the way.

Then the speech bubble should fade in, indicating that the computer is talking, and you as the user must act, like when a dialog says "Save your work now. I take your laptop away in 30 seconds. Look in my eyes, I am the user now."