A scene is a story segment and an element container.
Each scene has an animation pipeline that contains the actions to perform in each frame.
If a frame has no actions, it's called a still.
To build the animation pipeline use the methods:

  • addAnimations
  • addSerialAnimations
  • addStills

A scene usually is associated with a div in the html file.
Scenes with class=abeamer-class are automatically added to story upon story creation.
But it can also be a virtual scene.

Only one scene can be active at a certain point in time, but if it's defined a transition it two scene can be visible during the transition process.

see: transitions.





public export interface

export interface Scene{ }

public property [Scene]

name?: string;


public property [Scene]

transition: Transition;

Returns scene transition information.

see: transitions.


readonly public property [Scene]

readonly frameInNr: uint;

Defines the end of the scene pipeline. Usually this value is the same as frameCount but for off-sync animations frameInNr can have less value than frameCount.


readonly public property [Scene]

readonly frameCount: uint;

Total number of frames contained the scene.


readonly public property [Scene]

readonly storyFrameStart: uint;

Sum of all the frames from the previous scenes.


readonly public property [Scene]

readonly storySceneIndex: uint;

Zero-based Index of this scene within the list of scenes.

readonly public property [Scene]

readonly id: string;

Scene id from the DOM element.


public method [Scene]

addStills(duration: TimeHandler): Scene;

Adds a series of motionless frames defined by duration.
This method changes the end of the pipeline (frameInNr).


public method [Scene]

addAnimations(animes: Animations): Scene;

Adds a list of parallel animations to the render pipeline.
The animations can start off-sync from each other via Position parameter.

see: animations.


public method [Scene]

addSerialAnimations(serialAnimes: Animations[]): Scene;

Adds a list of serial animations to the render pipeline.
This is the same as: serialAnimes.forEach(anime => addAnimations(anime))
Use this if you want to load all animations from an external file.


public method [Scene]

getElementAdapters(selector: ElSelectorHandler): ElementAdapter[];

Used only task plugin creators.


public method [Scene]

getPEls(selector: ElSelector): pEls;

Creates a pEls from the selectors.


public method [Scene]

pElsShow(selector: ElSelector): pEls;

Adds visible = true to the pipeline.


public method [Scene]

pElsHide(selector: ElSelector): pEls;

Adds visible = false to the pipeline.


public method [Scene]

pElsFadeIn(selector: ElSelector, duration?: TimeHandler): pEls;

Wrapper for addAnimation with visible = false, followed by opacity moving to 1.


public method [Scene]

pElsFadeOut(selector: ElSelector, duration?: TimeHandler): pEls;

Wrapper for addAnimation with opacity moving to 0, followed by visible = false