fullPage.jsでスクロールを遅延させ、アニメーションが完了するまで待機する方法

はじめに

fullPage.jsのアニメーションを遅らせ、アニメーションが完了した後にスクロールを実行したい場合は、beforeLeave コールバックを使用できます。

このコールバックで false を返すと、スクロールは実行されません。

この機能を利用して、コールバック内に独自のロジックを追加し、スクロールをトリガーするタイミングを制御できます。

JavaScript コード

次のコード例では、4回スクロールしないと次のセクションへスクロールできないように設定しています。

var cont = 0;
new fullpage('#fullpage', {
    beforeLeave: function(origin, destination, direction, trigger){

        // 4回スクロールするまではスクロールを防ぐ
        cont++;
        return cont === 4;
    }
});

CodePen の例

では、アニメーションが完了した後にスクロールできるようにするにはどうすればよいでしょうか？

デモをご覧ください：

ペンを見る fullPage.js アニメーション完了後にスクロールを遅延 GSAP by Álvaro (@alvarotrigo) on CodePen.