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

Widgets featured
Functions covered
Composition Structure
Add a subcomposition called Text Ticker into the Root composition.
Root composition structure Add a Text Ticker widget, a rectangle as background, and create a control node.
Text Ticker subcomposition structure Open the composition script editor, select the Text Ticker script, and copy & paste the script below.
Text Ticker composition script Save the composition scripts and test the script by animating the "Text Ticker" subcomosition "In" and "Out".
Text Ticker composition control
Composition 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
PreviousRead control nodes, generate HTML text with backgroundNextComposition script editor reference
Last updated
Was this helpful?