Text Ticker - Start ticker on "In" animation

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

Screenshot

Widgets featured

• Text Ticker

Functions covered

• comp.findWidget()

• comp.getPayload2()

• widget.getPayload()

• widget.setPayload()

Composition Structure

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

   

   Root composition structure
2. Add a Text Ticker widget, a rectangle as background, and create a control node.

   

   Text Ticker subcomposition structure
3. Open the composition script editor, select the Text Ticker script, and copy & paste the script below.

   

   Text Ticker composition script
4. Save the composition scripts and test the script by animating the "Text Ticker" subcomosition "In" and "Out".

   

   Text Ticker composition control

Composition Script

Text Ticker script

(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);
    }
  };
})();

Singular Control App

Singular.live Control Appapp.singular.live

Read control nodes, update ticker messages, and restart ticker on In animation