vivus.jsを使用した手書き風アニメーションをslickスライドでactive（表示）されているタイミングでスタートさせるには

Question

まずはじめに

初心者のため、もしかしたら非常に簡単なことかもしれません。
コードも作成したものの、無駄がある可能性があります。
色々と試してみたものの、どうしても実現出来ませんでした。
どなたかご教授頂けますと幸いです。

実現したいこと

slick.js（https://kenwheeler.github.io/slick/）のスライド上で、
表示されたタイミングでvivus.js（https://maxwellito.github.io/vivus/）を使用した
手書き風アニメーションをスタート、着火させたい。
スライドは全3枚です。

もしくは、slick.jsの場合、表示されているスライドにはclassにslick-activeが
付与されるので、そのclassが追加されたらアニメーションがスタートするような
ものでも構いません。

• アニメーションの表現自体は成功していますが、問題は表示のタイミングです。
• スライド1枚目はsetTimeoutで繰り返し設定をしているので表示はうまくいきますが、

2枚目以降、もしくは表示2回目以降がバラバラになってしまいます。

• あくまで私の予想？なのですが、合計秒数とsetTimeoutの数値が合っていないからでは

ないかと思うのですが、それでもなぜか計算が合いません。

• setIntervalで繰り返すということも考えたのですが、書き方がおかしいのか、

何回も実行してしまい、2回目・3回目とスライドの回数が増えるほど表示が早くなってしまいます。

参考にしたサイト

https://www.webprofessional.jp/how-to-create-the-invisible-pen-effect-in-svg-using-vivus-js/

現在の状況・試したコード

●<path>の設定について
各スライドの**一番初めの<path>にのみ、 data-delay="60"**を追加しています。
なので60ほど遅れてアニメーションがスタートします。
cssの設定に関しては秒数を設定していないので省略致します。
※そもそもにこの60が0.06秒なのか、0.6秒なのか…。
・

●slickの設定はこちら

$('.slide ul').slick({
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 5000,
speed:500,
cssEase:'ease-out'
});

・

●vivusの設定はこちら
setTimeoutで数秒後に再度着火するようにしていますが、
これがどうしてもズレてしまいます。秒数計算が間違っているだけだとは
思うのですが、スライドとの兼ね合いもあり、なかなかうまくいきません。
※duration: 20の場合、何秒計算になるのでしょうか。合計で20かかる、ということなのか、
1つ1つの<path>が20かかっているということでしょうか。

//スライド１の手書きanimation設定
new Vivus('svg-animation1', {
      start: 'inViewport', 
      type: 'scenario-sync',
      duration: 20,
      forceRender: false,
      animTimingFunction: Vivus.EASE
      }, 
      function(anime1){
        setTimeout(function(){ anime1.reset().play(); }, 5500);
      }
    );
//スライド２の手書きanimation設定
new Vivus('svg-animation2', {
      start: 'inViewport', 
      type: 'scenario-sync',
      duration: 20,
      forceRender: false,
      animTimingFunction: Vivus.EASE
      }, 
      function(anime2){
        setTimeout(function(){ anime2.reset().play(); }, 5500);
      }
    );
//スライド３の手書きanimation設定
new Vivus('svg-animation3', {
      start: 'inViewport', 
      type: 'scenario-sync',
      duration: 20,
      forceRender: false,
      animTimingFunction: Vivus.EASE
      }, 
      function(anime3){
        setTimeout(function(){ anime3.reset().play(); }, 5500);
      }
    );

以上になります。恐らくあと少しのところまで来ているのですが、
あと一歩が足りません。
大変恐縮ですが、解決策をお知りの方、
いらっしゃいましたら少しでも構いません。
解決に近づける助言・ご指導のほどよろしくお願いいたします。

Comments

[m.ts10806]

>初心者のため、もしかしたら非常に簡単なことかもしれません。
「初心者アイコン」を質問に付加してください。

[m.ts10806]

あとPHPは本件にどのように関係するのでしょうか？
「jQuery」および「jQueryプラグイン」のほうが関係すると思います。
タグを見直してください。

[mykyofit]

初心者アイコンの存在すら知りませんでして、助言いただきありがとうございます！修正いたしました。

Answer 1

切り替わりのイベントでVivusを動かすようにすれば良いのでは。

【afterChange | slick - にほんご。】
https://tr.you84815.space/slick/events/afterChange.html

Comments

[mykyofit]

こちらを参考にしたところ、無事に実現できました！
slickで制御するのは全く考えてなかったので
目からうろこでした。本当にありがとうございます！

Answer 2

setTimeoutではなく、slickでafterChangeを使用することで
無事作成できました。

スライド１枚目の１回目だけはafter対象外なので、
１回きりで別途指示を出しました。

//1回目1枚目の設定
new Vivus('anime1', {
      start: 'inViewport', 
      type: 'scenario-sync',
      animTimingFunction: Vivus.EASE
});

//それ以外、基本的なスライドへの指示
$('.slide').on('afterChange', function(event, slick, currentSlide){
new Vivus('anime1', {
      start: 'inViewport', 
      type: 'scenario-sync',
      animTimingFunction: Vivus.EASE
      }),
new Vivus('svg-animation2', {
      start: 'inViewport', 
      type: 'scenario-sync',
      animTimingFunction: Vivus.EASE
      });
});