Bubbleでスクロール連動型アニメーションを実装する方法【プラグインAOS】

ノーコードツール「Bubble」で、一定量スクロールするとフワッとコンテンツを表示させるアニメーションを実装する方法をご紹介。

無料プラグイン「AOS（Animate on scroll library）」を使えばものの数分で実装できます！

アニメーションさせたいエレメントにIDを付与して、ワークフローでAOSを設定するだけなのでぜひお試しあれ。

動画解説バージョンはこちら！

無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

実装イメージ

スクロールしていくとフワッとフェードインで要素が表示されます。

AOSを使ったBubbleのスクロールアニメーションは以下の手順で実装します。

pluginsタブの「Add plugins」をクリックしてプラグイン検索ページへ行き、「AOS」を検索してインストールしましょう。

※ふだんはインストール画面のキャプチャにしてるんですが、AOSは個人的に思い入れが強いのでこっちのかっこいいほうにしちゃいました。

次に、Settingsタブの中のGeneralタブをクリックします。最下部にあるAdvanced optionsのExpose the option to add an ID attribute to HTML elementsにチェックを入れます。

チェックすることで各エレメントにIDを設定できるようになります。

スクロールアニメーションさせたいエレメント（今回はGroup）のAppearanceタブの最下部の項目「ID Attribute」に適当にIDをつけます。例ではfadeと入力しました。

仕上げです。Workflowタブを開き、General　>　Page is loadedを選択します。

次にactionで、Pluginsの中のAOSを選択します。

最後にAOSを適用するSelectors（IDをつけたエレメントのID）を入力します。スクロールアニメーションさせるエレメントが複数ある場合はIDをカンマ区切りで入れましょう。

AOSのAnimationの種類は主に、fade・flip・slide・zoomの４つです。以下のようにfadeの中でもいくつか枝分かれしたアニメーションが用意されているので色々試して最もしっくりくるものを選んでくださいね。

AOS公式のアニメーションデモもぜひご覧になってイメージどおりのスクロールアニメーションがあるかどうかチェックしてみましょう。

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！