Animation

Brickly


Design

The site (this site) was designed as a portfolio of my work, so it’s very important to me that it is extremely creative and clear to use. Various mood-boards and UX designs were trialled.

Certain browser animations can be complex, fast, and smooth, and the design principle was to engage visitors through immediate and fulfilling illustrative animations. These would not be frivolous, but serve the role of a UI while create a clear UX pathway.

Development

By leveraging SASS, styling which would previously have required javascript can be accomplished easily with CSS. Furthermore, package management and a modern built environment allow better automatic support of older browsers, and quicker prototyping.

The site uses many animations which must be synchronised and sometimes reversed, for which I used the Anime-JS library. Since page transitions were also largely taken over by javascript, much of the site effectively became an state dependent app. Fortunately the power of ECMAScript 6 (compiled into vanilla JS though webpack) meant that the project could move from a functional to object oriented paradigm with appropriate encapsulation, abstraction and inheritance.