> For the complete documentation index, see [llms.txt](https://developer.singular.live/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.singular.live/composition-scripting/use-cases/text-ticker-start-ticker-on-in-animation.md).

# Text Ticker - Start ticker on "In" animation

This example explains how to start the Text Ticker widget crawl on the subcomposition's "In" animation.

<figure><img src="/files/yrywgZiILWtr8uNmOa06" alt=""><figcaption><p>Screenshot</p></figcaption></figure>

## Widgets featured&#x20;

* <img src="/files/HJTS7Rpcu78hD3gL09hm" alt="" data-size="line"> [Text Ticker](https://support.singular.live/hc/en-us/articles/360025487532-Text-Ticker-Widget)

## Functions covered

* [comp.findWidget()](https://developer.singular.live/composition-scripting/cheat-sheets/fundamentals#findwidget)
* [comp.getPayload2()](https://developer.singular.live/composition-scripting/cheat-sheets/fundamentals#getpayload2)
* [widget.getPayload()](https://developer.singular.live/composition-scripting/cheat-sheets/fundamentals#getpayload-1)
* [widget.setPayload()](https://developer.singular.live/composition-scripting/cheat-sheets/fundamentals#setpayload-1)

## Composition Structure

1. Add a subcomposition called **Text Ticker** into the **Root** composition.

   <figure><img src="/files/QqarmRGCPFGqI9eh40fy" alt=""><figcaption><p>Root composition structure</p></figcaption></figure>
2. Add a Text Ticker widget, a rectangle as background, and create a control node.

   <figure><img src="/files/ORJPwnTPi8rppbCUB0Rz" alt=""><figcaption><p>Text Ticker subcomposition structure</p></figcaption></figure>
3. Open the composition script editor, select the Text Ticker script, and copy & paste the script below.&#x20;

   <figure><img src="/files/V4rMEyTTH6oBqiImx6Af" alt=""><figcaption><p>Text Ticker composition script</p></figcaption></figure>
4. Save the composition scripts and test the script by animating the "Text Ticker" subcomosition "In" and "Out".

   <figure><img src="/files/XNoOEqB6x81YJLt0yooO" alt=""><figcaption><p>Text Ticker composition control</p></figcaption></figure>

## Composition Script

{% code title="Text Ticker script" %}

```javascript
(function() {

  return {

    init: function(comp, context) {
      console.log("Initialize Composition script " + comp.name);

      // we get the Text Ticker widget object
      const wiTextTicker = comp.findWidget("Text Ticker")[0];

      /**********************************************************************/

      // we listen to timeline events
      comp.addListener('timeline_event', (event, msg, e) => {
        // quick exit if a child composition propagated the event
        if (msg.compositionId != comp.id) return;

        const m = msg.message;
        // we reset and set the Text Ticker's speed on the "In" animation start
        if (m.event == "start" && m.targetState == "In") {
          const p = comp.getPayload2();
          // we remember the current ticker speed
          const speed = wiTextTicker.getPayload()["speed"];
          // we reset the speed and the message text
          wiTextTicker.setPayload({
            "speed": 0
          });
          // we set the ticker speed and update messages
          wiTextTicker.setPayload({
            "speed": speed,
            "text": p["Messages"]
          });
        }

        e.stopPropagation();
      });

      /**********************************************************************/

      // we listen to payload / control node changes
      comp.addListener('payload_changed', (event, msg, e) => {
        // quick exit if a child composition propagated the event
        if (msg.compositionId != comp.id) return;

        const p = comp.getPayload2();
        wiTextTicker.setPayload({
          "text": p["Messages"]
        });

        e.stopPropagation();
      });

    },

    close: function(comp, context) {
      console.log("Close Composition script " + comp.name);
    }
  };
})();
```

{% endcode %}

## Singular Control App

{% embed url="<https://app.singular.live/control/5kYH7oYCt94a2gnG44O9ev>" %}
Read control nodes, update ticker messages, and restart ticker on In animation
{% endembed %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developer.singular.live/composition-scripting/use-cases/text-ticker-start-ticker-on-in-animation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.