All Collections
Viz Flowics
Building Blocks
Using the Ticker Building Block
Using the Ticker Building Block
Updated over a week ago

The Ticker element allows you to add highly customized scrolling graphics to your Overlays. It is useful for news tickers, stock info, weather forecasts, and more.

The Ticker element is exclusive to Professional and Enterprise plans.

The Ticker lets you design different templates to display different items found in the data bound to it. This is the main difference with the Text Crawler, that only supports one template (or “Items Composition” setting).

Supported data

The Ticker must be bound to any Data Provider that delivers an array of data.

The Ticker does not support the binding of a list of strings for the elements

All elements in the data array must have:

  1. An individual identifier, that must be unique to each element. This will allow you to have cycling controls, reporting to a Tally, or restarting the Crawler from the last item shown.

  2. A template identifier, that can be shared across elements. This will be used to know which template to use for representing each element.

  3. Other fields represent the actual payload that will be displayed. For example, text strings for news headlines, or numbers representing market variations.

For example, here is the payload of a Local JSON Data Connector:

Ticker's Templates

Templates are compositions that can be conditionally shown, depending on the value of an identifier field on each element of the data array.

These templates can be composed using Text, Image, and Container elements to achieve the desired designs.

Having multiple Templates allows you to visually differentiate the items that are shown, so you can build a single Crawler that displays regular news headlines, breaking news headlines, and weather info, each one with a different look and feel.

Here is an example of a "breaking news" headlines template and a “regular" headlines template, each with a slightly different design:



Creating a Ticker

You need to add a Ticker element to your Tree. To get the Ticker working are:

Setting up Templates

  • Bind the Crawler source to a valid data source

  • Set the template identifier field

Adding Templates

  1. Select the field that will act as a “Template identifier”.

  2. Bind the template ID, this will allow the Crawler to know what template it should use for displaying each element of the array.

  3. Use the “Add” button to add as many templates as you need.

  4. Click a template name to display the template settings popover.

  5. To use that template, specify the value that the identifier field should be matched against.

Following our example, the “Headline” template will be used for all the array elements which “template_id” fields have the value of “HEADLINE”:

Setting up items' identifier field

Once the Source of the Ticker is bound to an array, you can specify which field of the array elements will be used as an item identifier.

Use the “Item identifier” field in the “Ticker Settings” section of the Ticker inspector panel to select the corresponding field.

Designing templates

The Ticker templates can be composed only using:

  • Containers

  • Texts

  • Images

To do so, simply drag those elements from the Building Blocks list into each Crawler Template:

Elements Tree and stacking order

The order of elements in the tree inside a Crawler Template behaves differently than those outside the Crawler.

While regular elements' order represents their visual depth —like layers—, allowing you to decide how they will overlap, the order of elements inside a Crawler Template is mapped to the horizontal left-to-right stacking order.

So, those elements listed above in the Template subtree will be shown to the left than those listed below. Play around with the elements’ order to compose which things are placed first and which ones last.

Elements' Contextual Properties

Containers, Texts, and Images inspector panels present a couple of different properties when used inside a Ticker, that respond to its “stacking” layout and allow you to fine-tune their design properties.

Position and Rotation properties are not configurable in the context of a Crawler Template, as these could be incompatible with the scrolling animation.


  • Position, size, and rotation cannot be configured in this context.

  • Padding allows you to set the spacing between the borders of the Container and its content.


  • Position, size, and rotation cannot be configured in this context.

  • Font size can be specified in pixels, and the regular “Font resizing” (fit in one line, fit in container, clip to lines) are not available.


  • Position and rotation cannot be configured in this context.

  • Image size is set in pixels instead of percentages.

Crawler animation and behavior settings

  • Delay: In seconds, before the text starts to scroll.

  • Animation Type: As long as the Text Crawler is visible, it will loop through the items. That animation can behave in two ways:

    • Batch: The entire group of chained Crawler items will scroll until the last one exits before the first one appears again.

    • Continuous: Crawler items will loop continuously. The last one will be immediately followed by the first one, without space between them.

  • Speed: Sets the speed of the crawler animation. You can use a decimal value, but we recommend using integers for better frame accuracy at the output. This value stands for the number of pixels per frame to be displaced, on an ideal 60 fps output. Keep in mind that hardware specs and browser memory load impact the delivered fps.

Please note that the features 'Report current item to Tally' and 'Restart behavior' are only available with the enterprise plan.

  • Report current item to Tally: When enabled, it will send an API message with the ID of the item currently entering the scene, so you can keep track of which ones are being shown. Use this for custom auditing. For more information, read the Tally Support WebSocket article.

  • Restart behavior: Defines how the Crawler will behave when hidden and shown again (i.e.: when its parent Overlay goes OUT and then IN). You can choose to start again from the first item or to remember the last item shown and restart from that point onwards.

The 'Remember last shown item' can only be seen in action in the Output; in the Editor, it always starts from scratch.

Did this answer your question?