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

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

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

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

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

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

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

日本最大級のノーコード開発実績

ノーコード開発サービスのご案内

  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ
【一分で完了】資料をダウンロード

実装イメージ

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

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

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

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

Bubble版スクロール連動アニメーション実装手順

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

  1. プラグイン「Visibility Detector」をインストール
  2. 監視対象のGroupの中にVisibility Detectorエレメントを設置する
  3. ワークフローでVisibility Detectorのイベントを設定する
  4. 要素が表示されたときに実行したいアクションを設定する

プラグイン「Visibility Detector」をインストール

大きな青い瞳が特徴的

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

Visibility Detectorのプラグインページ

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

監視対象のGroupの中にVisibility Detectorエレメントを設置する

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

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

ワークフローでVisibility Detectorのイベントを設定する

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

要素が表示されたときに実行したいアクションを設定する

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

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

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

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

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

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsのノーコード受託開発特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

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