MARKETPLACE
PLUGINS
NEBULA - REPEATING GROUP ROLL
Nebula - Repeating Group Roll logo

Nebula - Repeating Group Roll

Published November 2025
   •    Updated this week

Plugin details

Repeating Group Roll is a Bubble plugin that provides robust, touch-friendly automatic scrolling (continuous or per-item) for repeatable groups, with drag, momentum, hover-pause, and publishable states for app workflows.


Nebula - Repeating Group Roll


  

 

Description

Overview

Repeating Group Roll is a Nebula plugin that adds configurable automatic scrolling to repeating-group style containers. It supports continuous and per-item modes, horizontal or vertical operation, pause-on-hover, touch/mouse drag with momentum, looping or reversing at ends, and a small runtime API for start/stop/seek integration.

How It Works

  • Attach Repeating Group Roll to a container (by element id). The plugin locates a scrollable child or uses the container itself as the scrolling element.
  • Choose operation mode: continuous (frame-based smooth scroll) or by_item (interval-based, advances one item per step).
  • Configure direction, speed (pixels/sec) or interval (ms), loop and end behavior (loop or reverse), and whether to pause while hovering.
  • Plugin exposes lightweight runtime APIs (start, pause, resume, stop, scrollToIndex) and publishes states (is_running, current_offset, current_index).
  • Touch and mouse drag are supported; dragging temporarily pauses auto-scroll and applies momentum scrolling on release, restoring auto-scroll if it was running before the drag.

When to Use

  • Auto-advancing carousels or marquee-like lists that should progress automatically but remain user-interactive.
  • Large vertical or horizontal feeds where you want gentle, configurable automated movement for demos, kiosks, or curated displays.
  • UI patterns that require both programmatic control (start/pause/seek) and natural touch behaviour (drag + momentum).

Benefits

  • Smooth, predictable automatic scrolling with robust edge handling (looping, reversing, or stop on end).
  • Natural user experience: pause-on-hover, drag support, and momentum restores flow without losing control.
  • Small, clear runtime API and published states make it simple to integrate with workflows and triggers.
  • Scrollbar hidden (visual) but fully functional to keep UI clean while preserving scroll accessibility.

Key Features

  • Modes: continuous (frame-accurate) and by_item (interval per item).
  • Directions: up / down / left / right; auto-detection of horizontal vs vertical behavior for elements.
  • Configurable speed (px/sec) and interval (ms), pauseOnHover, loop, reverseOnEnd, startOnLoad.
  • Drag & touch support with momentum and automatic resume when appropriate.
  • Runtime API: start, pause, resume, stop, scrollToIndex; publishes is_running, current_offset, current_index and emits events: started, paused, resumed, stopped, tick, reached_end, reached_start.
  • Automatic discovery of scrollable child elements when container itself isn't scrollable.
  • Graceful fallbacks and defensive checks to work even when provided canvas/context is nonstandard.

$5

Per month

stars   •   0 ratings
2 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Nebula logo
Nebula
Joined 2023   •   24 Plugins
View contributor profile

Instructions

Installation
  • Install the Repeating Group Roll Nebula plugin to your project via the Nebula Plugin Marketplace (or import the plugin package).
  • Drop the plugin element onto the page and configure the target container by its element id (the plugin will attempt to find a scrollable child if the container itself isn’t scrollable).

Core Functionality

  • The plugin locates a scrollable element using the provided element id. If the container is not scrollable, it walks the DOM to find the first scrollable child and uses that as the scroll element.
  • Two operation modes:  
       
    • continuous — uses requestAnimationFrame and moves the scroll position smoothly according to speedPxSec.
      •  
    • by_item — uses setInterval to advance by one item width/height (detected from first child or an element with id starting "cell").
      •  
  • Drag/touch system temporarily pauses auto-scroll, tracks velocity while dragging, and applies momentum on release. If auto-scroll was active before drag, it resumes after momentum completes.
  • Scrollbar is hidden visually (CSS + injected style) while preserving scrolling and accessibility.

Plugin Elements

  • Target container: an element id string provided by the host. The plugin will resolve it via document.getElementById or querySelector.
  • Scroll element: the resolved element used for scrolling (either the container or its first scrollable descendant).

Inputs

All inputs are configurable at design-time or runtime. Inferred defaults are shown in brackets.

  • elementId — [string] id of the container to auto-scroll. Required to target the correct element.
  • direction — [string] "down" (default), "up", "left", "right". Determines scroll axis and sign.
  • mode — [string] "continuous" (default) or "by_item".
  • speedPxSec — [number] pixels per second for continuous mode (default: 30).
  • intervalMs — [number] interval between steps in by_item mode (default: 2200 ms).
  • pauseOnHover — [boolean] whether hovering pauses auto-scroll (default: true).
  • loop — [boolean] whether to loop to the start/end (default: true).
  • reverseOnEnd — [boolean] whether to flip direction when an end is reached (default: false).
  • startOnLoad — [boolean] whether to auto-start when initialized (default: true).
  • debug — [boolean] verbose console logging for development (default: false).

Returned Values & Published States

Repeating Group Roll publishes runtime states (useful for bindings and workflows):

  • is_running — boolean (true when auto-scrolling is active).
  • current_offset — integer (current scroll offset in px, rounded).
  • current_index — integer (estimated item index based on first child's size and current offset).

Events / Triggers

  • started — emitted when auto-scroll starts.
  • paused — emitted when auto-scroll pauses.
  • resumed — emitted when auto-scroll resumes after pause.
  • stopped — emitted when auto-scroll stops.
  • tick — emitted each frame (continuous) or step (by_item) when movement occurs.
  • reached_end — emitted when scroll reaches the end.
  • reached_start — emitted when scroll reaches the start.

Runtime API

Use these actions from workflows or script triggers:

  • start() — start auto-scrolling (honors current config).
  • pause() — pause auto-scrolling immediately.
  • resume() — resume auto-scrolling (no-op if already running).
  • stop([trigger = true]) — fully stop auto-scrolling; optional boolean to suppress final event.
  • scrollToIndex(idx) — jump to the given item index (works in both axes; calculates using first child size).

Workflow Usage

  • Start or stop the auto-scroll from page events or buttons using the runtime API actions.
  • React to published states (is_running, current_offset, current_index) to update UI badges, analytics, or to synchronize other components.
  • Use reached_end/reached_start events to trigger content-refresh or visual cues (e.g., load next page or show “end reached” indicator).

Best Practices

  • Ensure the container has an id and contains child elements with deterministic dimensions; the plugin estimates stride from the first child or element with id starting "cell".
  • For by_item mode, prefer consistent item sizes to keep stepping precise.
  • Enable pauseOnHover for desktop browsing to avoid surprising the user; for kiosk displays you may disable it.
  • Use debug = true only during development — it produces console logs to help diagnose resolution of the target element and runtime behavior.
  • Avoid excessive speedPxSec values; test across devices to ensure accessibility and readability.

Example Use Cases

  • Auto-rotating product carousels on a landing page (loop=true, by_item or continuous as desired).
  • Vertical news-ticker for office displays (continuous, pauseOnHover=false for unattended screens).
  • Guided showcases where external controls call scrollToIndex to snap to featured items during a narrative tour.

Troubleshooting

  • Plugin cannot find target element — Verify elementId matches an element on the page and that the element is rendered before the plugin initializes. If the page uses dynamic rendering, call start() after the element is present. Enable debug to see resolution logs.
  • Scrolling feels jumpy — Check for inconsistent child sizes, or use continuous mode with an appropriate speedPxSec. In by_item mode ensure item dimensions are stable and intervalMs is adequate for perceived motion.
  • Dragging doesn't work on mobile — Confirm the container allows touch-action (plugin sets touch-action to pan-x pan-y). Also test for overlays capturing touch events.
  • Momentum doesn’t resume auto-scroll — If the element’s scroll boundaries are reached during momentum the plugin may emit reached_end and stop or reverse depending on loop/reverseOnEnd. Inspect events to determine behavior.
  • publishState errors in certain editors — The plugin uses a publishSafe wrapper to convert values to strings if required by the host; enable debug to see warnings. If your environment restricts publishState, use the runtime API and events instead.

Support

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Ecommerce   •   Containers   •   Social Network   •   Blog   •   Mobile   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales