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

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

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

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

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

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴

実装イメージ

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

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

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