Links
Comment on page

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

Functions covered

Composition Structure

  1. 1.
    Add a subcomposition called Text Ticker into the Root composition.
    Root composition structure
  2. 2.
    Add a Text Ticker widget, a rectangle as background, and create a control node.
    Text Ticker subcomposition structure
  3. 3.
    Open the composition script editor, select the Text Ticker script, and copy & paste the script below.
    Text Ticker composition script
  4. 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 App
Read control nodes, update ticker messages, and restart ticker on In animation