いろいろな方法があると思いますけど、
私だったら、まずイラレでデザインを作ります。
ファイル→書き出し→スクリーン用に書き出しsvg化して、ライブラリーを使用してアニメーションさせます。
アニメーション後、写真と切り替えます。
ライブラリー
Vivus.js
ライン描画のアニメーションに特化した軽量な JavaScript ライブラリー。
Snap.js
Adobe 社が開発した SVG アニメーションの JavaScript ライブラリー。
Lazy Line Painter
Vivus.js 同様、ライン描画に特化した JavaScript ライブラリー。
公式ページに SVG ファイルをドロップダウンしてアニメーションを加え、コードを出力することができます。
SVG アニメーション初心者でも扱いやすいソフトです。
この程度であればVivus Instantで再現できると思いますよ。
誰でもプログラミング不要で簡単に「手描き風」のアニメーションを作れます。
https://maxwellito.github.io/vivus-instant/
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。