Winner in the Best Educational Hack category of IC Hack 2020
It's a slideshow editor focusing on giving you complete freedom in designing delightful transitions. Elements present on two slides will smoothly transform to their new position, rotation, scale, colour, and any other CSS parameter you may want! You can also design in and out transitions for appearing and disappearing elements.
Try it out here: https://csslides.netlify.app/, or watch a short demo here: https://www.youtube.com/watch?v=HMSvtmqNJ3M!
The editor is built on top of the Vue.js framework, using the Vuetify library for the UI. This generates a JSON description of the slideshow (which describes all the objects and their styles on each slide). This is then passed to a viewer document, which uses it to construct all of the DOM elements, and generate CSS for the entire slideshow. The slide div element has an id that depends on which slide should be currently active. This way we can just change the id and let css (and the browser) handle all of the transitions, so there's very little js overhead during the presentation itself.
For now local storage of the browser is used to store presentations.
Most of the code and build instructions are in the slideshow-editor folder!