On air, transitions and scrolling | Docs

An overlay can play its own entrance and exit, or leave the motion to InterDirector, and a ticker or a credits roll can have InterDirector scroll it. The Starter Lower Third plays its own entrance and exit, and the Starter Ticker scrolls.

Knowing when you are on air

Your page is told each time it goes on or off air, from whatever took it, the Overlay button, a Cut or a Fade, an automation or a control surface, as the interdirector:onair event:

window.addEventListener("interdirector:onair", function (event) {
  if (event.detail.isOnAir) {
    playEntrance();
  } else {
    playExit();
  }
});

Three things to build around:

The first event is a state, not a take. It arrives as soon as your page has loaded, saying where the overlay is now. A Show that reopens with your overlay already up loads it on air. Off air, the first event means settle on the finished graphic; there was nothing on screen to play out.
Your values arrive first. The interdirector:parameters event comes before this one, so an entrance knows what it is showing.
Off air, your page shows the finished graphic. It is what Preview shows the operator. Start the page in its opening state, though: it is drawn from its first frame, and the first event settles it where it belongs.

So a page that animates itself has three states:

State	What the page shows
Off air	The finished graphic, as it looks once its entrance is over. Preview shows this.
Going on air	Its opening state, then its entrance, then the finished graphic.
Going off air	Its exit, then the finished graphic again once InterDirector has taken it away.

Transitions

Without transitions in the manifest, the overlay cuts on and off, or fades when the operator uses Fade. To choose, declare an enter and an exit:

"transitions": {
  "enter": {
    "type": "slide",
    "direction": "bottom",
    "durationMs": 500,
    "easing": "easeOutCubic"
  },
  "exit": { "type": "fade", "durationMs": 400, "easing": "easeIn" }
}

type: fade, slide or page.
direction, for a slide: top, right, bottom or left, the edge it arrives from and leaves towards.
durationMs, and an optional delayMs: in milliseconds.
easing: linear, easeIn, easeOut, easeInOut (the default), easeInCubic, easeOutCubic or easeInOutCubic.

fade and slide move your whole overlay as one picture, and your page does nothing. They suit a graphic that arrives in one piece.

page is for an overlay that animates its own parts: a bar that grows, a name that rises after it. InterDirector moves nothing; it only decides when your overlay is shown:

"transitions": {
  "enter": { "type": "page", "delayMs": 80 },
  "exit":  { "type": "page", "durationMs": 600 }
}

Going on air, InterDirector waits delayMs before showing anything. Use those milliseconds to put everything in its opening state; 80 covers a couple of frames at any frame rate.
Going off air, InterDirector keeps your overlay on screen for durationMs, then takes it away. Make it at least as long as your exit, or the exit is cut off.
Return to the finished graphic only after that, once your overlay is off screen. Any sooner and it springs back into view on air.

Keep motion to when it is on air

InterDirector redraws your page whenever it moves, on air or not. A page that animates all the time costs as much waiting in Preview as it does on air, for every overlay in the Show. So run decorative motion only between going on air and going off air, and stand still otherwise. Preview is easier to read that way too.

Scrolling: tickers and credits

An overlay whose whole picture travels, a ticker or a credits roll, declares a scroll rather than animating it, and InterDirector moves it:

"scroll": {
  "axis": "horizontal",
  "speed": 140,
  "mode": "loop",
  "speedParameter": "speed",
  "directionParameter": "rightToLeft",
  "content": "#message"
}

axis: horizontal or vertical.
speed: pixels per second. speedParameter names a number parameter the operator sets it with instead, and speed stays the fallback.
mode: once, one pass that holds where it ends, for credits; loop, the same pass again and again, for a ticker; or continuous, repeats joined so the start is never seen, which needs content. Start with loop.
direction: forward, the default, which is right to left, or upwards for a vertical scroll; or reverse. directionParameter names an on-or-off parameter the operator sets it with instead, on meaning forward.
content: the element that has to cross the screen, when your page holds more than that. Leave it out and the whole page is what travels, as in a plain credits roll.

A scrolling page holds still. InterDirector lays it out, takes one picture of it and moves that picture. Anything your page animates is not seen. When a parameter changes, the page is laid out and pictured again, so new text shows at once.

Let the page grow. InterDirector measures how far your page reaches past the screen and moves it that far. A page fixed to the screen’s size with its overflow hidden measures as the screen, and never scrolls. Leave the width free for a horizontal scroll, the height for a vertical one.

A bar that looks still. InterDirector moves the whole picture, background included. For a ticker’s bar to look still while the text moves, make the bar reach far past the text at both ends, wider than the screen, so the screen is always covered:

#bar {
  display: inline-flex;
  padding: 0 2880px;
  background: #14141a;
}

There is a length limit. A scrolling picture can be at most 16,384 pixels long. A longer one is not cut short: the overlay goes offline with a message giving its length and the limit. At ordinary text sizes that is several hundred lines of credits.