HTML5/CSS3/JS Presentation Framework
CoffeeScript JavaScript
Failed to load latest commit information.
demo fixed demo css, link type from text/html to text/css Jun 6, 2012
src/coffee version 0.1.0, initial release Jun 4, 2012
LICENSE version 0.1.0, initial release Jun 4, 2012


Check out the demo

Mosho is another browser-based presentation framework. Inspired by impress.js, but in my own flavor.

If you're familiar with impress, the basics are the same. Use data-(x|y|z|rot(x|y|z)|scale) attributes to move around mosho-slide class elements all wrapped in a mosho class container.

Arrows and spacebar move start transitions from slide to slide, and hash links are followed appropriately.

The rest of these docs are mostly for reference. If you'd like to get a feel for what the code looks like, check out everything in the demo directory.

Slide (.mosho-slide) attributes

data-x, data-y, data-z = number

translate the slide in 3d space

data-rotx, data-roty, data-rotz = number

rotate the slide in 3d space (order is x,z,y)

data-scale = number

make the slide bigger (>1) or smaller (0 < x < 1) than it would otherwise be

data-next, data-prev = slide-id

introduce non-linear flow by changing destination slide in either direction

data-transition = duration timing-function delay

like CSS transitions, minus the property specifier. Get's applied to the container element (think camera) before transitioning to the element with this transition

Slide groups (.mosho-group)

Slides can be nested inside .mosho-group elements to apply common styling and transforms. Any data-(xyz|rotxyz) transform attributes on the group are applied to the transform attributes of children.

CSS Notes

All slides will have the mosho-slide class.

The current slide is given the mosho-active class, all others have the mosho-inactive class.

Mosho API

Mosho was designed to fit goals I had a desire to fill. I'm open to suggestions.


Start mosho. Prior to this, mosho does nothing. Triggers "mosho:pre-init" and "mosho:post-init" events on the document.

Jump directly to the specified slide.

Triggers appropriate "mosho:enter:slide-id", "mosho:leave:slide-id", "mosho:pre-show", and "mosho:post-show" events on the document. post/pre-show events' detail parameter contains:

  • prevSlide: the Slide object being transitioned from
  • nextSlide: the Slide object being transitioned to, mosho.prev()

Looks at current slide and then calls mosho.jump() appropriately.

mosho.enter(slide-id, callback), mosho.leave(slide-id, callback)

Helper functions to add listeners for entering or leaving the specified slides.


Currently, it's just a convenient way to attach a collection of callbacks to pre/post init/jump events. I have plans to expand functionality later. Plugin should be an object containing at least one of the following:

  • preInit: callback
  • postInit: callback
  • preShow: callback
  • postShow: callback


Get's the Scene Element object with specified id, or returns current slide if no id is given.

Up next

This version of Mosho contains the major features I wanted, but I've got more I already want to be adding.

  • auto-scaling

    I do like this about impress.js, and I hope to get around to it next.

  • More plugin features

    In particular, I'd like to add support for custom scene tree types and clean ways to push/pop element (transform|style|...) states between transitions

  • Dynamic scene tree elements

    Supporting runtime insertion/deletion/restructuring of slides/groups seems like a useful feature - it's probably going to be my next major update.


    I'm fully aware the internal documentation could use work.

  • other stuff

    I'm always open to suggestions, but I'd prefer to add support for highly specialized changes in the form of supporting plugins where possible.


Right now it's under MIT