Wix Studio(Velo)での連続したスライド・アニメーション

Introduction

Wix Studioでのサイト制作を時折行っているのですが、クライアントからのリクエストで多いアニメーションがWix Studioo(以降、ノーコードでのデザインをこのように呼称します)内のプリセットでは行えない場合があります。

連続したスライド・アニメーション

呼び名がわからないので、ここでは「連続したスライド・アニメーション」と呼びます。
流通している呼び名があれば教えてください。

アニメ－ションの概要は以下です。

• 初期は何も表示されていない状態
• プレースホルダ(べた塗りの矩形領域)が左からスライド-インする
• プレースホルダが右へスライド-アウトすると、コンテンツが表示されている

実装

Wix Studio側での設定

• 任意のコンテンツを配置
• コンテナを追加しコンテンツに重なるようにプレースホルダを配置
• それぞれにidを付与(例としてコンテンツを#content、プレースホルダを#placeholderとします)
• それぞれデフォルト値をHiddenにする

Velo側での記述

setTimeout内にアニメーションに関する処理を記述します。
タイムアウト値はトリガーとなっている処理から起算したミリ秒で設定します。
下記の例では、画面が表示されたとき(onReady)から1秒後にアニメーションが開始されます。

スクロールしないと表示されないコンテンツの場合はonViewportEnterに関数を設定し、その中でsetTimeoutから記述します。さらにonViewportLeaveで$w('#placeholder').hide()と$w('#content').hide()を設定します。

$w.onReady(function () {
    setTimeout(async () => {
        await $w('#placeholder').show('slide', {
            direction: 'left',
            duration: 500,
        })
        await $w('#placeholder').hide('slide', {
            direction: 'right',
            duration: 500,
        })
    }, 1000)
    setTimeout(async () => {
        await $w('#content').show()
    }, 1500)
}

以上で連続するアニメーションの記述ができます。

Conclusion

要点としては、Veloで記述できるshow()は、Wix Studioで設定できるアニメーションを実行できるという点と、show()はPromiseで返却されるという点です。
async/awaitを用いることで連続した処理を行うことができます(awaitしないとアニメーションが競合し意図しない挙動をみせます)

殴り書きで文面でのみ記載しているのでイメージしにくいかと思います。
機会があれば画像など差し込んで読みやすくしようと思います。