HTML　アニメーション　タイトル文字を滑らかに表示させる方法

実現したいこと

下記のHPのヘッダー部分のロゴのアニメーションを再現したい。
https://studio-tremo.com/

発生している問題・分からないこと

実現方法がわからない。
ロゴの画像はあります。下記に表示。
ロゴの文字は出ているが、アニメーションになっていなくて困っている。

該当のソースコード

HTML
1<svg class="mask" viewBox="0 0 279 86.2" id="move">
2							<defs>
3								<mask id="clipMask">
4									<path class="st1" d="M-2.9,10.5c0,0,17.3-7.1,38.4-9s43.7-0.3,47.3,7.8c3.7,8.2,0.8,16.1-10.6,22.5s-19-14.2-19-14.2
5									s0.7,12-10.6,28.8c-11.3,16.8-26,41-26,41s29.2-23.3,47.9-35.9c13-8.7,12-4.4,12.4,3.2c0.3,4.9-1.8,7-0.1,12.7s21.8-4.4,23.3-5.7
6									c1.6-1.3,14.9-8.9,17.6-18.5C120,35,99,56.4,107.5,58.9c5.3,1.6,33.1-10.5,33.1-10.5s9.4-4.1,12-1.8c2.7,2.4,3.4,7.6,7.9,7.9
7									c4.5,0.3,11.6-3.3,17.8-6.3c6.3-2.9,5.2-2.8,6.9-1.8c1.7,1,8.4,12.6,11.6,14.5c3.3,1.8,8.9,6.1,27.2-1.4l3,0.4
8									c0,0-24.9,0.3-21.2-2.4c3.7-2.8,4.5-2.1,4.5-2.1s19.2,2.8,28.4,4.2c9.3,1.3,33.4,3,42.8,2.9"/>
9								</mask>
10							</defs>
11							<!-- ベース画像 -->
12							<image xlink:href="https://studio-tremo.com/wp/wp-content/themes/studio-tremo/assets/images/top/logo-animation.svg" width="100%" height="100%" mask="url(#clipMask)"></image>
13						</svg>

CSS
1.st1 {
2    fill: none;
3    stroke: #fff;
4    stroke-width: 2.5;
5    stroke-linejoin: round;
6    stroke-miterlimit: 10;
7}

jquery
1var spWindow = 559;
2var tbWindow = 959;
3
4$(function() {
5
6	var mainVisualScript = new Vivus('move', {
7		type: 'scenario-sync',
8		start: 'manual',
9		duration: 140,
10		forceRender: false,
11		animTimingFunction: Vivus.EASE_OUT
12	})
13
14
15	var mainVisualTaglineEng = $(".top-header-nav-area_tagline .eng");
16	var headerGnavPc = $(".header-gnav_pc");
17	var logoType = $(".logo-type");
18	//windowサイズ取得
19	var windowWidth = document.documentElement.clientWidth;
20	if(windowWidth <= spWindow) {
21		//画面サイズ559以下（sp）
22		setTimeout(function(){
23			topJpnTaglineMove();
24		},800);
25		setTimeout(function(){
26			mainVisualTaglineEng.addClass('fade-in');
27		},1800);
28		setTimeout(function(){
29			mainVisualScript.play();
30		},2000);
31		setTimeout(function(){
32			logoType.addClass('fade-in');
33		},4200);
34	} else if (windowWidth > spWindow && windowWidth <= tbWindow) {
35		//画面サイズ959以下（tb）
36		setTimeout(function(){
37			topJpnTaglineMove();
38		},800);
39		setTimeout(function(){
40			mainVisualTaglineEng.addClass('fade-in');
41		},1800);
42		setTimeout(function(){
43			mainVisualScript.play();
44		},2000);
45		setTimeout(function(){
46			logoType.addClass('fade-in');
47		},4200);
48	} else {
49		//画面サイズ960以上（pc）
50		setTimeout(function(){
51			topJpnTaglineMove();
52		},1000);
53		setTimeout(function(){
54			mainVisualTaglineEng.addClass('fade-in');
55		},2000);
56		setTimeout(function(){
57			headerGnavPc.addClass('fade-in');
58		},600);
59		setTimeout(function(){
60			mainVisualScript.play();
61		},2000);
62		setTimeout(function(){
63			logoType.addClass('fade-in');
64		},4200);
65	}
66});

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

今の状態

補足

ここの部分でかなりつまずいています。
やり方を教えていただけると助かります。

行動規範の内容に同意します

回答2件

すでにこちら=HTML 流れる文字を実装したいで解決済みかと思うのですが、なにか問題がありますか？「コードが少し複雑」と指摘いただきましたが、いたってシンプルだと思います。
stroke-dashを使ったsvgのアニメーション

svg
1<style>
2svg{
3  background-Color:gray;
4}
5#target_path{
6  animation: fill 2s linear;
7  stroke:white;
8  stroke-width: 2;
9  stroke-dasharray: 625;
10}
11@keyframes fill {
12  0% {stroke-dashoffset: 625;}
13100% {stroke-dashoffset: 0;}
14}
15</style>
16<svg xmlns="http://www.w3.org/2000/svg" width=280 height=90>
17<mask id="myMask">
18<path id="target_path" fill=none d="M-2.9,10.5c0,0,17.3-7.1,38.4-9s43.7-0.3,47.3,7.8c3.7,8.2,0.8,16.1-10.6,22.5s-19-14.2-19-14.2
19s0.7,12-10.6,28.8c-11.3,16.8-26,41-26,41s29.2-23.3,47.9-35.9c13-8.7,12-4.4,12.4,3.2c0.3,4.9-1.8,7-0.1,12.7s21.8-4.4,23.3-5.7
20c1.6-1.3,14.9-8.9,17.6-18.5C120,35,99,56.4,107.5,58.9c5.3,1.6,33.1-10.5,33.1-10.5s9.4-4.1,12-1.8c2.7,2.4,3.4,7.6,7.9,7.9
21c4.5,0.3,11.6-3.3,17.8-6.3c6.3-2.9,5.2-2.8,6.9-1.8c1.7,1,8.4,12.6,11.6,14.5c3.3,1.8,8.9,6.1,27.2-1.4l3,0.4
22c0,0-24.9,0.3-21.2-2.4c3.7-2.8,4.5-2.1,4.5-2.1s19.2,2.8,28.4,4.2c9.3,1.3,33.4,3,42.8,2.9"/>
23</mask>
24<image width=280 mask="url(#myMask)" xlink:href="https://studio-tremo.com/wp/wp-content/themes/studio-tremo/assets/images/top/logo-animation.svg" />
25</svg>