Should the explanatory text come before or after the animations in tech articles?
Before the animation, introduce the graphic.

Below the animation, include a caption.  Your first example has a nice caption but I would format it so it looks more clearly like a caption.

Provide a way to turn off the animation.  It is hard for some people (like me) to focus on the text that follows while the movement is continuing to take place.

Thank you so much for asking.  Animation on the web can drive a person nuts.  On the other hand, it can be helpful in gaining understanding.