Another interactive piece written for large touch screens, this BASF Elastopave interactive explorable follows the same style and design considerations as the original BASF Elastolit utility piece.
Besides the reuse of the Canvas rain code written for the BASF Elastolit utility piece (otherwise the videos would be huge!), this piece has a lot more animated GIFs added into the piece by my designers.
This is a huge time saver when the art pieces are confirmed, and you just need to make sure that the artwork is animated in a loop.
Whilst it is possible to animate every piece of artwork individually, the amount of time taken would be non-trivial. Getting to the nitty gritty of the low level allows absolutely flexibility, but time considerations are not unlimited.
There is one art piece that is a mix of SVG animation overlaid on top of static art, and it is the 3rd pane (yes in this piece you can go to certain slides immediately by a specific URL link).
I decomposed the SVGs files given to me (English and Chinese versions) to animate the piece. I cut out what I wanted to animate in inline SVG, and the rest is loaded as an image background (toggled for language). A bit of positioning, and you get the effect you see.
Whilst there are many ways to create animations and transition effects, each has a different cost. One should always bear in mind things like performance, browser compatibility (if needed) and flexibility of composition.