Hi Hugh - Welcome to the Forum!
Attached is Hype Project Demo: dataflow JHSv1.hype.zip (24.5 KB)
There are two different approaches used in this Demo:
The “Original” approach with your JPG image for the dotted line and another that I added utilizing one of Hype’s native drawing primitives (rectangle) to replace the JPG; and also a Symbol - more info on these approaches below Fig.1:
Fig.1 “JPG” and “Rectangle & Symbol” screen shot
The “Original” Approach - Adjustments
I made two changes to your original to get a smoother flow…
1) Unchecked the “Position with CSS left/top” in the “Document Inspector”
**2)** Adjusted the "left" property of the JPEG pixel by pixel until it matched the restart flow - trial and error, took about 30 seconds.
Below your “Original” line animation, as mentioned previously, is another using a…
"Rectangle & Symbol" Approach
The rectangle (named “Dotted Rect” in the Demo) has in the “Element Inspector” the side & bottom border properties set to “None”. The top border of the rectangle (which creates the dotted line effect) is set to a blue color; 11 pixels wide; style set to “Dotted”.
By using Hype’s native primitive You can easily draw (and change!) your rectangle’s length (or height if a side border was used instead), border width (dot dimensions) & color - while lowering file size and server load.
If You are not familiar with Hype’s Symbols (Pro version only) you can read more about them in the Documentation here. Symbols are a perfect match for creating repetitive animations - which it sounds like You are designing with your network flow animation.
In the Demo the “Dotted Rect” - which creates the dotted line - is inside a Symbol. This Symbol has its own timeline which runs its dotted line animation - as does Hype’s “Main Timeline” for your “JPG” version.
Also notice in Fig.1 above… the rectangles on each side of the Symbol’s animated dotted line do not need to fill a particular amount of physical space in order to cover the hidden part of the line. The Symbol has its “Content Overflow” set to “Hidden”. By hiding the “Overflow” You are freed from the restriction of having your design dictated by the need to cover the animated lines, which should open up more design options.
By duplicating this Symbol You can quickly replicate the dotted line animation as many times as You like and easily change a property, such as the color of the animated line, just by modifying one of the symbols; and all the other duplicates of that Symbol will automatically change that property as well.