The behaviour of layerJS can be completely controlled by HTML attributes and links. This article gives you a full list of attributes.

layerJS elements are structured in nested stage-layer-frame hierarchies which look in its simplest from as follows:

<div lj-type="stage">
    <div lj-type="layer">
        <div lj-type="frame">
            … your HTML code …
        </div>
    </div>
</div>

Each of the 3 types of elements can be controlled by various HTML attributes. All layerJS attributes start with data-lj-(strictly HTML compliant) or lj-(short form).

Example:

<div lj-type="frame" lj-transition="fade">
  … your HTML code …
</div>

Alternatively the behaviour can be controlled by CSS custom attributes. Most attributes (except lj-name, lj-type) can also be defined in CSS. Attributes in CSS always start with --lj-.

#frameid {
  --lj-transition: left;
}

Note: CSS properties take precedence before HTML attributes.

The different attributes and their functions are defined below. Each attribute can be used in the data-lj-* or lj-*form in HTML or in the --lj-* form in CSS. For simplicity the table below only shows the lj-form.

The Canvas layout allows placing (rotated or scaled) frames arbitrarily on an "infinite" canvas. Then the user can navigate between those frames by zooming into those frames, resulting in panning, zooming and rotating transitions.