I would like to learn how to make progressive hand-drawn animation (if it's not the correct term then it would be great if you could correct me).
This is the type of effect I am wanting to achieve. I did my research on the internet but couldn't find anything useful. The closest thing I could find was SVG stroke animation in the web browser I did however figure out a way to achieve this. The procedure is as follows:
- Use a software like Inkscape or Figma to draw a figure and export it as an SVG path.
- Next use the CSS properties
@keyframeto make the progressive effect.
This was fine to generate the animation, but I need it as a video file so that I can edit it with the rest of the video components. The downside with my aforesaid approach was:
- Converting the HTML, CSS, JS animation to a video file is not easy. I found two ( not so effective ) ways to get around this problem:
- Add more CSS to make the animation cover the entire page, enter fullscreen mode, and use any screen-recording software to record the animation. ( Not efficient as screen recording lowers the quality and this relatively low-quality video when merged with the rest of the clip will only make it look odd. ) ...OR...
- Convert the HTML document to Canvas and use something like RecordRTC to record the canvas. ( Not efficient as its a quite tedious process )
Is there any other ( hopefully simpler ) way to achieve such animations? A vector-based approach would be better as I might need to scale up and down graphics quite a lot of times.
I am a complete beginner in animation and video editing so any help or guidance would be appreciated.