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

2024年1月24日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

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

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

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

【日本最大級のノーコード開発実績】
無料でアプリ・システム開発の相談を受付中

実装イメージ

２つの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の開発の引き出しを増やすためにも試してみてくださいませ！