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

2024年1月24日

ノーコードツール「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の開発の引き出しを増やすためにも試してみてくださいませ！