Skip to content
This repository has been archived by the owner before Nov 9, 2022. It is now read-only.


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time


Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions.

-> DEMO <-

Related Projects

Diaporama Key features

  • Minimal and unopinionated library. Diaporama focuses on rendering the slideshow. Up to you to hook it to any event (window resize, touch events, keyboard,...) based on your needs.
  • Responsive: Diaporama works with any resolution and any ratio. The original image ratios are always preserved (crop to fit).
  • Simple API. the Diaporama API mimic the HTML5 Video API for a better learning curve. You can set some Properties and the library will always be in sync with your changes (and update efficiently with the minimal changes). There is also Events.
  • Easily interoperable with Virtual DOM library.
  • Videos support. allowing to define multiple video formats and image fallback.
  • Kenburns effect on images with configurable animation from/to and easing function.
  • Customizable transition effects using GLSL Transitions created on (or your own)
  • Works everywhere. Diaporama is implemented with WebGL (hardware accelerated) but also have DOM fallback.
  • The slideshow is described in a JSON format.
  • Retina-ready. By default, the library use devicePixelRatio as canvas resolution. N.B.: This has a cost in term of performance, so if you want you can just give 1. You can also responsively adapt it based on the canvas area.
  • Texts, Images and Shapes support – using slide2d which exposes everything Canvas can do.

Gitbooks Full Documentation

Current state of browser support

Diaporama should be widely supported by browsers (desktop and mobile). If WebGL is not supported by the browser/hardware, it fallbacks properly to DOM implementation (an opacity transition is used).

Here are the current browsers I've been testing on


image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.







No packages published

Contributors 4