1,213 reads

Use HTML links to trigger animated transitions

by Thomas HandorfNovember 1st, 2016

Too Long; Didn't Read

<strong>layerJS is the framework for creating animated interactive web UIs in pure HTML. Now it is possible to trigger frame transitions through HTML links. No coding required.</strong>

Companies Mentioned

featured image - Use HTML links to trigger animated transitions

layerJS is the framework for creating animated interactive web UIs in pure HTML. Now it is possible to trigger frame transitions through HTML links. No coding required.

layerJS is a lean, open-source UX composition library for modern Websites and Webapps. It let’s you create UX effects like menus, sliders, layers & lightboxes, parallax effects, page-swipes, zooms with one simple universal concept using one single javascript library.

layerJS introduces the Stage-Frame-Concept. All elements of your site or app are placed into frames. Stages are containers into which frames can be dynamically positioned using various animated transition.

Nested stages (white) and frames (red) to build a site with a floating menu and an included image slider.

The structure and interactions of your site are completely defined in HTML by marking up different blocks as frames or stages. To dynamically switch active frames in a stage so far the layerJS API had to be called.

With the 0.3 release, frame transitions can also be triggered simply through links. This allows you to define the full interactivity of your user interface in HTML without coding.

The following example is a simple content slider. Two buttons below the slider contain links, that will trigger frame transitions in the slider

<html>

<body><div lj-type="stage" style="width:100%;height:500px"><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="#frame1">Frame 1</a><a href="#frame2">Frame 2</a><script>layerJS.init();</script></body>

</html>

This results in a simple slider which you can later fill in your content and style with CSS. Checkout this JSbin to play around with the example

The router supports two modes:

1. Static Router

The static router allows you to add absolute urls that are connected to states, a list indicating which frames are active in which stages.

layerJS.router.addStaticRoute("/frame1",["frame1"])

will add a static route that will transition to frame1 if a link to “/frame1” is clicked. More complex scenarios are possible

layerJS.router.addStaticRoute("/awesome",["stage1.layer1.frame2","stage2.layer2.frame6"])

will trigger transitions in layer1 and layer2 if the user goes to /awesome

2. Hash router

The hash router works without initialization. It will trigger a transition to the frame given after the hash (#) symbol in a links url. A link to “#frame1” will trigger a transition to frame1 in what ever stage/layer this frame is in.

Both, the static router and the hash router can be used together.

Transition Parameters

By appending parameters to your links you can define how the transitions are animated. Currently the transition duration and the transition type can be defined: