The last in the series of interactive pieces written for BASF earlier this year, this BASF Haptex piece follows the same considerations as the rest of the interactive pieces.
Like the BASF Elastopave piece, this piece is heavily composed of animated GIFs for the artwork.
However, there is one partially animated SVG layered on top of background in slide 1 of the piece.
Again this was mainly due to time considerations after the artwork was frozen and this method of composition and editing was the easiest way out for the effect I wanted to achieve.
One of the bigger challenges for this piece was how to keep the animations invariant regardless of any form factor.
When the pieces were first designed, they were designed specifically for a 1920 x 1080 HD screensize, and the animations fit perfectly then. For example, in the first introduction pane, the objects would rotate correctly (they follow a simple bezier curve) and look good on the screen.
However, this would go entirely out of whack for smaller screens because the coordinates were all hard coded in. To solve this, the coordinates have to be relative to the screen size and a bit of math was involved to refactor the piece such that it works on any relative screen size.