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

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

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

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

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

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

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

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

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

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