# 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="https://1996175074-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3cdPul5g3lHEzkm2UkSf%2Fuploads%2Fth0WxtLnYmdj6i93vedi%2FText%20Ticker-01.png?alt=media&#x26;token=97b27b61-017a-43ea-81c4-9ee2ffef0c00" alt=""><figcaption><p>Screenshot</p></figcaption></figure>

## Widgets featured&#x20;

* <img src="https://1996175074-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3cdPul5g3lHEzkm2UkSf%2Fuploads%2FH7fsk3PiOXU45IRaAJP7%2FText%20Ticker%20Icon.png?alt=media&#x26;token=97d97ffe-d746-405e-b006-4b159a5fa756" 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="https://1996175074-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3cdPul5g3lHEzkm2UkSf%2Fuploads%2Fs9noJJFbWzWVKXCmo4N5%2FText%20Ticker-02.png?alt=media&#x26;token=8f89f6a1-9556-4ef4-9c55-52ed34bfd584" 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="https://1996175074-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3cdPul5g3lHEzkm2UkSf%2Fuploads%2F2tvAMtCGD6ea0chMOJu7%2FText%20Ticker-03.png?alt=media&#x26;token=4f034d4a-d152-43e7-a9e7-7a30a01163db" 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="https://1996175074-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3cdPul5g3lHEzkm2UkSf%2Fuploads%2Fnj7DpEnyWhx4287EDNcr%2FText%20Ticker-04.png?alt=media&#x26;token=264d8713-c6a0-447f-aa53-dce800a69dfd" 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="https://1996175074-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3cdPul5g3lHEzkm2UkSf%2Fuploads%2FU65qfOGqAO4sRsEYR3X9%2FText%20Ticker-05.png?alt=media&#x26;token=78053b57-271c-400f-bb71-ad2501a317a9" 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 %}