Animation of SVG images
When scrolling on this screen, the gray line is visually built (at moderate speed) until the element (sheme) is completed. Then, with a small break from the beginning of the grey line movement, the blue strip begins its movement to the first stage. After that, the information is presented at this stage.
When studying this screen, the client indicates the stages by the cursor (as a result of which the button with the stage number burns), and when clicking, a further loading of the blue link occurs to the next stage. Following the principle of similarity to the last stage.
If there is no interaction with this screen, the stages will be loaded by scrolling from the fifth to the sixth. The blue puzzle ends its movement at the last stage.
Video of finished animation - https://drive.google.com/file/d/1D4Ufv-oBJxut9LpC1thFY40JFlCIz2Vi/view
When studying this screen, the client indicates the stages by the cursor (as a result of which the button with the stage number burns), and when clicking, a further loading of the blue link occurs to the next stage. Following the principle of similarity to the last stage.
If there is no interaction with this screen, the stages will be loaded by scrolling from the fifth to the sixth. The blue puzzle ends its movement at the last stage.
Video of finished animation - https://drive.google.com/file/d/1D4Ufv-oBJxut9LpC1thFY40JFlCIz2Vi/view
Kyiv 
Available for hire
Offer work