How to animate line drawings?

Question

css

How to animate line drawings?
Just like on this site
www.sound-of-change.com/#/intro
And so that they change like a slide, and move to another picture
. You can at least have resources to study this issue. Preferably code
What language can be used to implement this?
Thank you very much in advance!

Answer 1

You can also canvas or you can hang on scroll like this: https://codepen.io/topicstarter/pen/OevaZO
, but like a wave, this is already webGL shaders,
and when the background image runs behind the cursor, this is generally a pioneering effect for beginners

Answer 2

Write in javascript.
Well, for starters, I would create a tool to create the picture itself, that is, it simply puts points that are connected by a line, at the output it should give out an array of coordinates. We make the required number of images, and then we just make transitions, ideally so that all images have the same number of points, so that each point goes from one to another, otherwise you will have to add points, or initially find an array with the maximum number of elements and immediately draw all the points , and if there are fewer points, then either write some kind of interpolation or draw extra points on the coordinates of the last point of the array of image coordinates in order not to mess up the extra points.
Roughly speaking like this, but it is better to do interpolation and you can make intermediate arrays, you can make them automatically by shifting each array, for example, left and right, this is for an additional effect when changing the image. Well, you can draw curves, not straight lines.