Should the explanatory text come before or after the animations in tech articles? This question is in regards to curruclum development theory. The medium is blog articles / technical white-papers (accessed online). I often use animations to help drive points home, and I'm curious as to whether the supporting text should come before or after the animation.

Question:  Should supporting text come before or after animations?

Bonus question:  Should supporting text come before or after still images? (not-animated)

Examples:



Animation before text


The data moves from the Server to the left router. Then the Left router to the Middle router. Then the Middle router to the Right router. Then the right router to the Server.


Text before Animation

The data moves from the Server to the left router. Then the Left router to the Middle router. Then the Middle router to the Right router. Then the right router to the Server.
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.