【SVGアニメーション】スクロール量に応じたsvgアニメーション実装について

【教えてもらいたいこと】
プログラミング/フロントエンド

【具体的な相談内容】
【教えてもらいたいこと】
プログラミング/フロントエンド

※添付画像①②に関しましてはDMでのやり取りの際にお送りしたいと思います。

【具体的な相談内容】
募集内容をご覧いただきありがとうございます。

SVGを使用したアニメーションにつまずいており、解決に向けてご協力いただけるメンターさんを募集しております。


SVGアニメーションの条件としては

・スクロール量に応じてSVGを表示させる
※可能であればGSAPを使用

下記が参考SVGアニメーションの動きとなります。
https://www.iwaki-socks.jp/

⇒理想といたしましては上記のような動きとなりますが、
svgアニメーション開始時ただsvgの線がスクロール量に応じて表示されていくような実装でも問題ありません。（最初は非表示/完了後svg全て表示）

【動かす目標物のSVGアニメーション】

添付画像にある、①人②ハサミ③グラデ　箇所となります


【自身の検証結果】

私が検証したところ、人やハサミのsvgアニメーションの動きは実装出来たのですが
svgアニメーション時外枠の線にしか色がつかず中に色が付いた状態でアニメーションは出来ない状態となります（添付画像②）
⇒グラデ箇所は試しましたが最初からうまくいかず


※ご契約いただけた際に目標物箇所のみとはなりますがカンプをお送りいたします。

何卒、よろしくお願いいたします。
【目安予算】
5000円
【目安予算】
5000円