What is it?

Flowtime.js is a framework for easily building HTML presentations or websites.

It’s built with web standards in mind and on top of a solid full page grid layout.

The animations are managed with native and accelerated CSS3 transitions.
Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.

Press Down Key or Swipe Up to continue.

Compatibility and Support

Flowtime.js is fully compatible with real moderns browsers:

Firefox

Chrome

Safari

Opera

Internet Explorer 10

Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities will work.

In older browsers degrades to a bi-directional scrolling navigation with anchor links.

Touch Devices Support

On touch devices you can navigate through slides swiping in all directions.

By now Flowtime.js was tested and works on Safari Mobile and Chrome Mobile on iOS devices but the support will be wider in the near future.

Mastering the Navigation

You can navigate in many ways. The most common way is using the keyboard.

Navigation Keys and default behaviours:

Down Key goes to the next page or shows up the next fragment (we’ll see this later).

Up Key goes to the previous page or hides the fragment.

Right Key goes to the adjacent page in the next section (if available, it’s like a grid, otherwise it goes to the last page in the next section).

Left Key goes to the adjacent page in the previous section.

Alternate Navigation Control

Pressing the Shift Key you can alternate the the default navigation keys behaviour; let’s see how:

Down Key goes to the next page skipping all the fragments.

Up Key goes to the previous page skipping all the fragments.

Right Key goes to the first page in the next section.

Left Key goes to the first page in the previous section.

Some Other Keys

Because: the more, the better.

Page Up Key goes to the first page of the current section.

Page Down Key goes to the last page of the current section.

Home Key goes to the first page of the first section.

End Key goes to the last page of the last section.

Overview Mode.

You can look at the entire presentation by pressing ESC Key.
When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.

Try it out!

WARNING! Experimental Feature. If you experience problems in webkit browser you can use the alternate Overview Mode; see the documentation for more info.

Navigating the Overview

In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press Return or Enter Key or click on the desired page.

Navigate via Links or Javascript API

You can links every page by simply building the href value using this schema:

<a href="#/[section data-id attribute]/[page data-id attribute]">

Where data-id attribute is an optional attribute you can add to every section or page.
I.e.: if you want to go to back to the first page click here(press backspace to come back to this page).

You can also trigger every navigation behaviour using the Flowtime.js Javascript API.Take a look at the documentation if you want to learn more.

Navigate With History

Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.

This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.

Progress Indicator

You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.

Look at the bottom right corner and you can see a miniature of the presentation structure.

Clicking on a page thumb will navigate to that page.

Fragments Support

The built in fragments navigation allows to advance step by step inside a page.
Press down to try.

You can discover single elements or even a single part of an element, one at a time.

Fragments navigation is deeply customizable with some configuration options
You can learn how in the documentation.

Fragments Unleashed

Fragments can be more than just delayed piece of page.

Thanks to some special classes you can add a couple of useful custom behaviours.

The .step fragment will partially fades out;

The .shy fragment will completely hides itself;

You can use this two special fragment types to easily create special effects.

Thisisa.shyexample!

Andthisisa.stepone!

Default HTML Structures

Flowtime.js comes with a default theme that styles the most common HTML structures, like: