LayerJs keeps track of the layerJS state of the HTML document. The state describes which frame is active in which layer (and stage). This is done by the state object which is implemented as a singleton. The state is kept as an array of strings. Each string has a specific format to uniquely identify each active frame in the document.

The state is kept as an array of strings. Each string is represented as a unique path to a frame. This path contains the lj-name of the stage, layer and frame seperated by a dot. For example stage1.layer1.frame1 will point to a frame called "frame1" in a layer called "layer1" and a stage called "stage1".

<div data-lj-type="stage" data-lj-name="stage1">
    <div data-lj-type="layer" data-lj-name="layer1" data-lj-default-frame="frame1" >
        <div data-lj-type="frame" data-lj-name="frame1">
            … your HTML code …            
        </div>        
    </div>
</div>

This format also allows nested frames like stage1.layer1.frame1.stage2.layer2.frame2.

<div data-lj-type="stage" data-lj-name="stage1">
    <div data-lj-type="layer" data-lj-name="layer1" data-lj-default-frame="frame1" >
        <div data-lj-type="frame" data-lj-name="frame1">
            … your HTML code …
            <div data-lj-type="stage" data-lj-name="stage2">
                <div data-lj-type="layer" data-lj-name="layer2" data-lj-default-frame="frame1" >
                    <div data-lj-type="frame" data-lj-name="frame2">
                        … your HTML code …
                    </div>       
                </div>
            </div>
        </div>        
    </div>
</div>

If the stages and/or layers do not have a lj-name specified, a unique name will be generated based on the type and child number of this type. For example stage1.layer[1].frame1 where layer[1] will be the second layer in a stage called "stage1".

<div data-lj-type="stage" data-lj-name="stage1">
    <div data-lj-type="layer" data-lj-name="layer1" data-lj-default-frame="frameX" >        
        <div data-lj-type="frame" data-lj-name="frameX">
            … your HTML code …
        </div>
    </div>
    <div data-lj-type="layer" data-lj-default-frame="frame1" >
        <div data-lj-type="frame" data-lj-name="frame1">
            … your HTML code …
        </div>        
    </div>
</div>

The State object can return the current state of the document. There are 2 methods that can be used for this.

state.exportState()

This will return an array of strings that will contain the paths of all active frames in the document.

state.exportStructure()

This will return an array of strings that will contain the paths off all the frames (active and non-active) in the document.

You can use the state object to apply a specific state. Doing this will change which frames are active.

The state has a transitionTo method that can be used to transition to a specific state. This method accepts an array of strings (see State representation) and an (optional) object that will contain transition options.

<div data-lj-type="stage" data-lj-name="stage1">
    <div data-lj-type="layer" data-lj-name="layer1" data-lj-default-frame="frame1" >
        <div data-lj-type="frame" data-lj-name="frame1">
            … your HTML code …
        </div>
        <div data-lj-type="frame" data-lj-name="frame2">
            … your HTML code …
        </div>
    </div>
</div>

Calling state.transitionTo(["stage1.layer1.frame2"]) will make "layer1" of stage "stage1" transition to "frame2".

Calling state.transitionTo(["layer1.frame2"]) will make all layers called "layer1" transition to "frame2" if that frame is available.

Calling state.transitionTo(["frame2"]) will make all layers all transition to "frame2" if that frame is available.

Note that a partial state can be provided. In the examples above, state.transitionTo(["frame2"]) will make frame2 active in its layer. If other layers existed, their active frames would remain unchanged.

The state has a showState method that can be used to show a specific state without a transition. This method accepts an array of strings (see State representation).

<div data-lj-type="stage" data-lj-name="stage1">
    <div data-lj-type="layer" data-lj-name="layer1" data-lj-default-frame="frame1" >
        <div data-lj-type="frame" data-lj-name="frame1">
            … your HTML code …
        </div>
        <div data-lj-type="frame" data-lj-name="frame2">
            … your HTML code …
        </div>
    </div>
</div>

Calling state.showState(["stage1.layer1.frame2"]) will make "layer1" of stage "stage1" show "frame2".

Calling state.showState(["layer1.frame2"]) will make all layers called "layer1" show "frame2" if that frame is available.

Calling state.showState(["frame2"]) will make all layers show "frame2" if that frame is available.