スクロールして表示されたら、アニメーションをさせる方法を教えてください。

前提・実現したいこと

SVGアニメーションをホームページで導入しようと検索した結果、LAZY LINE PAINTERというサイトで簡単に作れると知り、実装してみました。（サイトURL:http://lazylinepainter.info/）
このアニメーションはwebサイトが開かれた瞬間に始まってしまうので、スクロールして表示されてからアニメーションをスタートさせる方法を教えていただけますと助かります。よろしくお願いいたします。

今回の動きを再現したcodepenのリンク
https://codepen.io/fukawa/pen/ExNNjQz

試したこと

また、過去に同じような質問がありましたが、これを参考にしてみても再現できませんでした。
https://teratail.com/questions/218096

該当のソースコード

html
1<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640" data-llp-composed="true" id="sign" class="lazy-line-painter"><defs><path d="M53.33 271.72L74.02 271.72L100.46 271.72L125.75 285.52L141.84 305.06L144.14 330.34L107.36 374.02L82.07 382.07L61.38 379.77L94.71 376.32L118.85 378.62L146.44 394.71L161.38 411.95L174.02 434.94L178.62 455.63L175.17 476.32L157.93 499.31L124.6 507.36L100.46 507.36L79.77 491.26L76.32 467.13L98.16 437.24L155.63 405.06L190.11 399.31L231.49 399.31L260.23 405.06L286.67 432.64L292.41 454.48L269.43 510.8L237.24 499.31L217.7 471.72L213.1 451.03L251.03 349.89L261.38 368.28L253.33 387.82L233.79 415.4L213.1 439.54L201.61 420L220 382.07L237.24 360.23L254.48 344.14L278.62 326.9L321.15 313.1L342.99 311.95L367.13 316.55L386.67 329.2L407.36 355.63L415.4 378.62L423.45 403.91L417.7 437.24L414.25 462.53L413.1 495.86L413.1 517.7L399.31 497.01L388.97 475.17L409.66 469.43L388.97 476.32L382.07 497.01L364.83 480.92L387.82 429.2L422.3 380.92L440.69 363.68L460.23 349.89L490.11 336.09L513.1 329.2L538.39 323.45L559.08 323.45L583.22 329.2L605.06 341.84L622.3 357.93L634.94 376.32L633.79 402.76L621.15 424.6L600.46 442.99L580.92 453.33L560.23 463.68L541.84 471.72" id="b1362Unmqx" data-llp-id="sign-0" data-llp-duration="1000" data-llp-delay="0" fill-opacity="0" style=""/></defs><g><g><g><g><use xlink:href="#b1362Unmqx" opacity="1" fill-opacity="0" stroke="#ffffff" stroke-width="8" stroke-opacity="1"/></g></g></g></g></svg>

javascript
1(function(){ 
2
3        document.onreadystatechange = () => {
4
5          if (document.readyState === 'complete') {
6                    
7            /**
8             * Setup your Lazy Line element.
9             * see README file for more settings
10             */
11
12            let el = document.querySelector('#sign');
13            let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":8.1,"strokeOpacity":1,"strokeColor":"#fff","strokeCap":"square","delay":1000}); 
14            myAnimation.paint(); 
15          }
16        }
17
18      })();

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

回答1件

ベストアンサー

こんにちは。

Intersection Observer を使ってみてはどうでしょうか。
Intersection Observer API - Web API | MDN

サンプル

js
1let el = document.querySelector('#sign');
2let myAnimation = new LazyLinePainter(el, { "ease": "easeLinear", "strokeWidth": 8.1, "strokeOpacity": 1, "strokeColor": "#fff", "strokeCap": "square", "delay": 1000 });
3
4const observer = new IntersectionObserver(
5  entries => {
6    entries.forEach(entry => {
7      if (entry.isIntersecting) {
8        myAnimation.paint();
9      };
10    });
11  },
12  {
13    threshold: 0.7 // 適当に加減してください。
14  }
15);
16
17observer.observe(el);
18