TremulaJS 1.1.0 — the crossAxis enhancement

Two new features

TremulaJS

Announcing a TremulaJS version update, 1.1.0. This version adds two important features, first, Mocha.js tests and second, by popular request, native crossAxis event passing.

About crossAxis event passing

The TremulaJS scroll axis is configurable as horizontal or vertical. Internally, this is referred to as the scrollAxis while the orthogonal axis is termed the crossAxis.

To the browser, any TremulaJS DOM object looks like a plain old static page element. (These are manipulated around at 60 frames per second for our UX benefit). When a native touchmove or scrollwheel micro-event happens, the default browser behaivior in many cases is to move the viewport contents around. This also includes our parent TremulaJS instance which in our case, is not (always) what we want.

In prior versions, all micro-events are shunted by TremulaJS — thus preventing any counteractive native behaivior. TremulaJS is mainly concerned with a macro-event stream emitted by the awesome Hammer.js library. This delegation strategy works great if you have a Tremula view which occupies the entire page. But what if you have content stacked before and/or after one or more TremulaJS modules? In the past you’d be stuck with no way to scroll to other page level content on the crossAxis.

In 1.1.0 this is resolved. TremulaJS now assigns each micro-event a directionality ratio. Events that move (more or less) perpendicular to the scrollAxis are trapped while events moving along the crossAxis are passed — and passed events are free to bubble up the DOM in a native kind of way.

So, to the developers requesting this feature, please give it a try — espically for iOS applications. I hope the response feels natural to you, even in cases where the user is not quite scrolling perfectly side-to-side or up-and-down.

Download, Fork, Contribute on GitHub

Send some feedback! @garris

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s