Over a million developers have joined DZone.

Folding HTML Views in App-UI

DZone's Guide to

Folding HTML Views in App-UI

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

A few months back I released App-UI, a UI container toolkit for creating HTML experiences.   It gives you common “view navigator” paradigms for mobile experiences… a view navigator stack that can push and pop views, a split view navigator, and a “sliding view” like Facebook’s iOS experience.  All of which are created entirely with HTML, CSS, and JavaScript, so they are great for mobile web or PhoneGap applications.

Although I haven’t committed many changes to App-UI recently, I’ve been evaluating different types of visual effects and thinking through options for making App-UI more configurable.   Recently I stumbled across OriDomi, a toolkit that easily provides the ability to fold UI elements as though they were made of paper.   There have been a few interesting UI-folding proof of concepts and demos floating around lately (such as this, this, and this), and I realized:

  • This can be done completely in HTML, CSS, & JS
  • This can be integrated into App-UI
  • It can be real for anyone to use

Below you can view the result of a day’s worth of tinkering:

I created this as an offshoot of the “Sliding View” demos – It is not integrated into the core functionality since not everyone is going to want it in their apps, but it is pretty easy to add.  You can check out both of my demos/samples below, with full source code.  Just be forewarned: they only work on newer browsers that support CSS3 3D transformations and transitions (WebKit for best results).  I’ve tested it in Chrome on OS X and mobile Safari, and it works great.  It does not work on Android.

I made a few changes to the open source OriDomi library, most importantly the ability to toggle between “live DOM” and the copied views that have the visual effects applied.  This allows me to have event listeners on DOM elements that can actually respond to user input.  I also added the ability to support DOM updates (it recreates itself to display changes), and added a “destroy” function to have it clean itself up from memory.

The first example is really basic.  It is an instance of the SlidingView that uses a modified version of the OriDomi toolkit to add a “fold” effect to the left sidebar.  I just wanted to show a basic use case, demonstrating the effect on “live” DOM elements.  You can check it out in your browser by clicking on the link/image below:

Simple Folding View

The second example is not quite as pretty, but definitely more complex.  It is an extension of my side-by-side ViewNavigators inside of a SlidingView, with the folding effect applied.   This example demonstrates complex objects with DOM manipulation having the fold effect applied. You can also check this one out in your browser by clicking on the link/image below:

Complex UI Folding View

… and this is just the tip of the iceberg.

Based on my experimentation so far, I’ve got big plans for App-UI.  I fully intend on rewriting how effects are applied to all of the container elements to enable them to be more configurable, have custom effect classes, and support multiple visual effects options.


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Published at DZone with permission of Andrew Trice, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}