One of our most desired offerings was our ability to provide motion/animation to clients, which we reflected heavily within the Grainandmortar.com site extensively. Nearly every single page contained some sort of dynamic motion to bring deeper visual interest to the page, whether through animating page separators or through large pre-animated imagery as hero images. From a technical standpoint, ensuring that these animations remained low-impact, smooth, and performant was my top priority.
Motion and animation were not limited to one-off illustrations, they were embedded into the very essence of every piece we worked on. On every page transition, on every hover state, animation and motion were an extension of who we were as an agency and the value of the designs that we delivered. As a front-end developer, this meant sitting down with our lead animator and learning how to translate After Effects timings, tweens, easing models and positioning settings into CSS. Complex designs were converted into .gif (or .apng), while we attempted to do as much as possible with native CSS libraries to maintain accessibility and control.