Starting and Stopping Stages

Below is a demonstration of how stopping and starting Stages works, as well as the differences

Click the buttons below the display to change the Content.

Cancel all cancelable events

beforestart

start

beforestop

stopping

stop

Indicators will flash when their respective Event type is dispatched. Canceled events will flash red. Monitored events are logged to the console.

Direct starting / stopping

In this example, the code behind the start and stop buttons looks like this:

function clickStart() {
    Plinthos.displays.demo.start();
}

function clickStop() {
    Plinthos.displays.demo.stop();
}

Calling stop() does not stop the Stage Instance instantly, instead it is delayed (in this example by 500ms) to give the canvas time to fade out. This is a feature of the Snippet configuration which applies a CSS transition to the canvas to match the "Fade Duration" option.

Viewport starting / stopping

Additionally, scrolling the viewport to a point where the canvas is no longer in the viewport but the Event indicators are still visible will demonstrate how the Display instantly stops the Stage from running as soon as it's out of the viewport, and restarts it when it re-enters the viewport. This is to ensure that device resources are not wasted on unseen Displays.

If this is undesirable for any reason, both starting and stopping by the viewport can be enabled or disabled individually using the "Start when visible" and "Stop when visible" options in the Snippet Configuration tools.

Effect on Content changes

Also provided are two buttons for changing the Shot. This is to demonstrate that Shot changes are applied instantly (i.e., they do not transition) when Stages are stopped.