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.
Add a Text Ticker widget, a rectangle as background, and create a control node.
Open the composition script editor, select the Text Ticker script, and copy & paste the script below.
Save the composition scripts and test the script by animating the "Text Ticker" subcomosition "In" and "Out".
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);
}
};
})();
