Bubbleでスクロール連動アニメーションを実装する方法！Visibility Detector

2024年1月24日

ノーコードツール「Bubble」でIntersection Observer風のスクロール連動アニメーションを実装する方法を紹介します。

プラグイン「Visibility Detector」を使うことで、BubbleでもIntersection Observerのように、ある要素が画面に表示されたかを監視できるんです。

画面をスクロールしていって、特定の要素が表示されたタイミングで何らかのアクションを実行する方法を探している方にぜひ試してみていただきたいTipsとなります。

また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。

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

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

EPICs株式会社の特徴

ざっくりの課題でも
プロが無料で提案

実装イメージ

２つのRepeatingGroupを横並びで設置するApple Musicや電話帳のようなデザインです。

画面をスクロールしていき、商品名のイニシャルがGのものが表示されたタイミングで右に固定しているアルファベットの対応する文字（ここではG）の色を赤に変更しています。

特定の要素の表示を監視して表示されたら特定のアクションを実行する、それが今回の実装イメージです。

※ボリューミーになってしまうので、実装イメージ動画をそのまま再現する方法は割愛させていただきます。

以下の手順で実装します。

まずはAdd PluginsページでVisibility Detectorと検索してプラグインをインストールしましょう。

Visibility Detectorをインストールすると、BubbleエディタのVisual ElementsメニューにVisibility Detectorエレメントが表示されます。

次に、スクロールしていったときに画面への表示を監視したいGroupなどの中にVisibility Detectorエレメントを設置します。邪魔にならないように、最後尾に置いておきます。

サンプルでは、RepeatingGroupの各要素を監視対象にしたかったので、RepeatingGroupの中のアイテムという名前をつけたGroupの中にVisibility Detectorエレメントを設置しています。

「監視対象の要素が画面に表示されたとき」というイベントは、Elements ＞ A Visibility Detector Enters screenで設定します。

最後に、監視対象の要素が画面に表示されたときに実行したいアクションを設定して完成です！

先日筆者が実際に検証した例を最後にご紹介して締めといたします。

Groupの中に２つのRepeatingGroup（以降RG）を横並びで設置
１つ目のRGでは、商品をアルファベット順に一覧で表示させる
２つ目のRGはアルファベットをAからZまで格納したoption set。AtoZで縦１列で表示させる
画面をスクロールしていって、たとえば商品名の先頭がGのものの一番最初のが表示されたら、縦１列で表示させているアルファベットのGの文字色を変更するといったスクロール連動アニメーションを実装

今回の記事で紹介したTipsは、特定の要件においてかなり重宝されるものだと自負しています。ぜひみなさんもBubbleの開発の引き出しを増やすためにも試してみてくださいませ！