# c3VOC animations

We use the HTML5 Animation Video Renderer (https://github.com/dtinth/html5-animation-video-renderer) to render frame-accurate animations built with HTML, CSS, and JavaScript.

To render an animation clone the html5-animation-video-renderer repository and run one of the following commands:  
(We assume that you are in the parent directory of the cloned repository and that the design repository is in `/home/eh22/design`. Adjust your code accordingly.) 

Example Intro:  
```shell
node ./html5-animation-video-renderer/render.js --video=example_intro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/intro.html?render&title=Bahn APIs - Wer hat mehr chaos, wir oder die?&speaker=marudor"
```

Outro:
```shell
node ./html5-animation-video-renderer/render.js --video=example_outro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/outro.html?render"
```

Pause:
```shell
node ./html5-animation-video-renderer/render.js --video=example_outro.mp4 --url="file:///home/eh22/design/dist/digital/c3voc/pause.html?render"
```

To watch the animation in your browser just open the file without the `?render` at the end.  
Please note, that some styles are only rendered correctly in Chromium :c  

Example URL for the pause animation:
`file:///home/eh22/design/dist/digital/c3voc/pause.html`