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.
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><head>
<script src="https://cdn.layerjs.org/libs/layerjs/layerjs-0.4.1.js"></script>
<link href="https://cdn.layerjs.org/libs/layerjs/layerjs-0.4.1.css" type="text/css" rel="stylesheet" />
</head><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:
t - transition duration (add ‘s’ for seconds or ‘ms’ for miliseconds)
p - transition type (fade, left, right, up, down)
using the link
<a href="#frame1?p=right&t=4s">Frame 1</a>in our example from above will let the transition back to frame1 move in the opposite direction and slower.
Please check out layerJS and the layerJS Wiki for more. Let us know what you think at developers@layerjs.org or Facebook or Twitter.
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!
