It's been almost a year since my last update on features I've added to the impress.js presentation framework. Already a year ago I had pretty much merged or implemented all of the open backlog for the project. But at the end of the post I still listed two popular requests I hadn't implemented: Support sub-steps and 2D navigation.

Most of last year I have worked on Impressionist, the 3D visual editor for creating impress.js slides. However, at some point I decided that appeasing the community of impress.js users also needed my attention, so last Spring I have spent some time implementing those last 2 items from the backlog.

2D navigation

The 2D navigation - or more precisely, non-linear navigation - is quite cool. It highlights the fundamental nature of impress.js presentations as 3D presentations. They're not PowerPoint slides where you can just move from one to the next. They are steps in a 3D space, and you could potentially navigate in many directions!

To really showcase what this might mean in practice - this is of course just one simple option - I have actually created a demo presentation:

Open presentation in new window

In the above presentation, the presenter can choose when speaking, whether to first cover everything there is to know about ice cream, then crisps, then pie (Down Arrow); or should the presenter rather first cover the pro's of each, then the con's (Right Arrow)?

The commonly requested feature could be done in similar fashion: A presentation could navigate through the default set of slides with Right Arrow, and then if the presenter wants to dive into some extra slide with more info, those could be available with Down Arrow.

Of course, presentations can be even more non-linear than this. They don't have to imply any kind of ordering at all. The opportunities are limitless. Well, limited by 3D space only.

Non-linear navigation was implemented as new "advanced" attributes to the goto plugin.

Sub-steps

Sub-steps were maybe the most requested feature at all. This is commonly seen in PowerPoint presentations, where, instead of showing all of the slide at once, you reveal one bullet point at a time. Supposedly, this helps the audience focus on each point.

This was perhaps also the reason I dragged my feet implementing it. Impress.js is NOT PowerPoint. The fact that people are trying to use it as PowerPoint is kinda depressing. I know the creator of impress.js, @bartaz, kind of feels the same.

Ultimately though, as it was such a requested feature, I felt I should do it for the community. So I've created a substep plugin.

The usage is simple and CSS based: Slide contents that have the class substep will be considered substeps. As you press next or previous arrows, each of them will get an additional class substep-visible. It's up to the presentation author to use CSS to make the substeps visible or hidden. Or, quite frankly, do whatever you want.

The funny thing is, although I had felt this was a stupid powerpointy feature, after adding it, I immediately started using it in my next presentation:

Open presentation in new window

Of course, I didn't use it the PowerPoint way, to animate a simple bulleted list, rather I learned that it's really handy way to use overlayed transparent images to create animations. I can already tell I will be using this a lot in future presentations too, so thanks a lot to the community for asking for it!

LaTeX notation

Yet another open issue in the impress.js queue was to support some way of using LaTeX to create mathematical formulas. This is now available by adding MathJax.js. MathJax is quite cool and also supports other notations than LaTeX, such as MathML or AsciiMath! I added a simple LaTeX section to the classic-slides demo to showcase it.

impress().tear()

There was also a more advanced request to be able to dynamically make changes to a presentation, then execute some kind of reload. Not surprisingly, I ended up needing exactly that kind of feature for the Impressionist editor myself, so I had to do it.

This was a lot of work, but simple for you to use:

impress().tear()

This will "uninitialize" the presentation to its original state, before you called impress().init(). You could then make some changes to the DOM, and call impress().init() again. In most cases the teardown+initialization is not visible to the user.

...

With these 4 additions, I have now completely drained the backlog of the upstream impress.js project. The plan for the Winter is to make more progress on Impressionist. Hopefully it could become useful for simple presentations soon.