layerJS 


UI composition & animation library for websites and webapps

Find us on Github
 

One concept - one library

UX patterns like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zoom effects are really just interactive animated layers. layerJS provides one simple universal concept  in one single Javascript library to create such patterns in a most flexible way. 

layerJS is not a UI kit. It introduces frames, basically empty boxes, which you can fill with your content. Which frames are shown where on the website / app is defined by the state object. HTML links, gestures or API calls can change this state, triggering animated transitions.

How layerJS works - Stages & Frames

1.

Organize content in Frames

Instead of creating complete HTML pages with code for menues or sliders, simply design all parts of your site as separate static HTML & CSS fragments, the Frames.

2.

Stages define positions

Stages are rectangular areas which  define where the Frames (page-content, menu-panes, lightbox content, slides) will be displayed dynamically in your final page. 

3.

UI composition & state transitions

Frames are dynamically fit into Stages to compose the final user interface. Upon user interaction, the state of the user interface changes by exchanging one or more Frames in one or more Stages using an animated transition.

Why layerJS is different

Just HTML

With layerJS the full layout and interactivity can be defined by pure CSS and HTML

Full flexiblity

layerJS does not provide a single effect with a given design but rather handles transitions of emtpy boxes that you can fill with your design.

A framework

layerJS does not just provide transition effects but a full framework including gesture support, a router and an API.

 

Getting started

To use layerJS you just need to define the stages and put all content in frames. The following list gives you minimal examples for common UX patterns. Feel free to combine them to your liking.

Slider

A slider needs a single stage, a layer and one frame for each slide. Controls can be placed on a second overlapping layer. Controls are regular links that link to specific frames or use special links like "#!next" or "#!prev"

Sample code

<div lj-type="stage">
  <div lj-type="layer" lj-default-frame="frame1">
    <div lj-type="frame" lj-name="frame1">
      ... content of frame 1 ...
    </div>
    <div lj-type="frame" lj-name="frame2">
      ... content of frame 2 ...
    </div>
  </div>
</div>
<a href="#slider.!prev">previous</a>
<a href="#slider.!next">next</a>

Try below: swipe or click arrows

Zoom UI

Zooming patterns, as often found in mobile apps, can be created with the "canvas" layout. Here, frames have fixed positions on the "canvas" and can be scaled or rotated. During transitions, the canvas is transformed (moved, scaled, rotated) such that the active frame fits into the stage.

Sample code

<div lj-type="stage">
  <div lj-type="layer" lj-layout="canvas">
    <div lj-type="frame" lj-name="zoomout">
      ... Headline and intro ...
    </div>
    <div lj-type="frame" lj-name="zoomin">
      <div lj-type="stage">
        <div lj-type="layer" lj-layout="canvas">
          <div lj-type="frame" lj-name="frame1">
            ... content frame 1 ...
          </div>
          <div lj-type="frame" lj-name="frame2">
            ... content frame 2 ...
          </div>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Try below: swipe or click thumbs

Parallax

Parallax effects can be created with two overlapping layers in a stage. If the frame in the upper layer is longer than the stage, it will scroll within the stage. Transparent areas in this frame will reveal the lower non-scrolling frame created the parallax effect.

Sample code

<div lj-type="stage">
  <div lj-type="layer">
    <div lj-type="frame" lj-fit-to="cover">
      <img src="img/background.png">
    </div>
  </div>
  <div lj-type="layer">
    <div lj-type="frame">
      ... content ...
    </div>
  </div>
</div>

Try below: scroll to see the parallax

Side menu

A layer can be used to create a menu floating on top of the regular content. The menu can be opened and closed using layerJS transitions between two or more frames representing the open and closed state.

Sample code

<div lj-type="stage">
  <div lj-type="layer" lj-default-frame="frame1">
    <div lj-type="frame" lj-name="frame1">
      ... page content ...
    </div>
  </div>
  <div lj-type="layer" lj-name="menulayer">
    <div lj-type="frame" lj-name="menu-closed">
      <a href="#menu-open">Menu</a>
    </div>
    <div lj-type="frame" lj-name="menu-open">
      <a href="#menu-closed">close</a>
      <ul class="nav-list">
        ... menu items ...
      </ul>
    </div>
  </div>
</div>

Try below: click menu to open it

Lightbox / Modal

A lighbox, modal or pop-up can be easily created with a layer on top of the content which initially does not show a frame. This layer can be filled with a lightbox' content upon link click.

Sample code

<div lj-type="stage">
  <div lj-type="layer" lj-default-frame="frame1">
    <div lj-type="frame" lj-name="frame1">
      ... page content ...
      <a href="#box-layer.box1>click here ...</a>
    </div>
  </div>
  <div lj-type="layer" lj-default-frame="!none" lj-name="box-layer">
    <div lj-type="frame" lj-name="box1">
      ... modal content ...
    </div>
  </div>
</div>

Try below: click link to open lightbox

 

Feedback & questions

Your feedback is very welcome! If you have any questions or comments please use the below feedback form or contact us at developers@layerjs.org. We are continiously improving layerJS so with your feedback you can help shaping the future development.

Send

Also please checkout our Wiki for more detailed documentation of the layerJS functions.

HELP ?