The ticker element in Instant creates a continuously scrolling horizontal marquee effect, commonly used for announcements, brand logos, testimonials, or promotional messages. This guide covers inserting and configuring the ticker element.
Adding a Ticker to the Canvas
Step 1: Open the Insert Panel
Navigate to the Insert panel in the left sidebar.
Step 2: Find the Ticker Element
Hover over the Interactive header. Locate the Ticker element in the popover.
Step 3: Drag to Canvas
Drag the ticker element onto your canvas. A pre-configured ticker with default items will be inserted.
Ticker Settings
With the ticker selected on the canvas, access settings in the right sidebar under the Ticker header.
Preview Navigation
Navigate through ticker items on the canvas
Control | Function |
Left / Right buttons | Move through items manually |
Dropdown menu | Jump directly to any item in the ticker |
Direction
Set which way the ticker scrolls:
Option | Behavior |
Left | Items scroll from right to left |
Right | Items scroll from left to right |
Alignment
Control vertical alignment of items within the ticker:
Option | Behavior |
Top | Items align to the top edge |
Center | Items align to the center |
Bottom | Items align to the bottom edge |
Gap
Define the spacing between items within the ticker (in pixels).
Speed
Control how fast the ticker scrolls. Higher values result in faster movement.
Pause on Hover
Enable or disable pausing the ticker animation when users hover over it.
Option | Behavior |
On | Ticker pauses when hovered, resumes when mouse leaves |
Off | Ticker continues scrolling regardless of hover state |
Note: The ticker element only supports horizontal scrolling. Vertical scrolling is not available.
Quick Reference
Task | Location |
Insert ticker | Insert panel → Interactive → Ticker |
Preview items | Right sidebar → Ticker → Left/Right or Dropdown |
Set scroll direction | Right sidebar → Ticker → Direction |
Set alignment | Right sidebar → Ticker → Alignment |
Adjust spacing | Right sidebar → Ticker → Gap |
Change speed | Right sidebar → Ticker → Speed |
Enable pause on hover | Right sidebar → Ticker → Pause on Hover |
Available Settings
Setting | Options |
Direction | Left, Right |
Alignment | Top, Center, Bottom |
Gap | Pixels |
Speed | Numeric value |
Pause on Hover | On, Off |