Putting gears in motion: animation principles on the new Gravity Works website

Published in

A Few Words From Gravity Works

6 min readAug 29, 2018

Animation is part of all our projects, whether it exists as subtle touches to links’ hover states, loading indicators, or full-screen menu transitions. For the recently redesigned Gravity Works company website, animation was baked into the process from the very beginning. By participating in conversations about our overall brand, researching design standards and recommendations, and experimenting in the browser, we produced guidelines to build a cohesive, engaging set of animations on the website that help tell the story of our company and our work.

Animation guidelines

As we built out animations within our pattern library and development site, we came up with three guidelines that they should follow:

Be meaningful
Don’t get in the way
Reflect Gravity Works’ brand

Implementing meaningful animations

Most importantly, animations should be meaningful throughout the site. By implementing animations only where they benefit a function of the website or help solve a problem — rather than using them as bells and whistles — we keep them from becoming overwhelming, frustrating, or prone to cause illnesses from motion sickness or vestibular disorders.

Take, for example, the checkerboard layout we used on pages like the Bridge Magazine case study. As the reader scrolls through the checkerboard layout, each icon slides in gracefully from offscreen, drawing the eye toward the content. On the Contact page, the logo appears and spins in place of the contact form as it processes a submission, providing a visual indication of the submission’s progress and improving perceived performance.

We used the concept of signaling as well, mainly for hover states, to hint that an action is interactive. The most obvious example of this is the menu button; when users hover over or focus on the button, the horizontal bars move, visually indicating that the object is interactive. When selected with a click or tap, the menu opens and the bars transition into an X shape. Users select the X shape again to close the menu.

And while animation on the website is often functional, in several cases, the intent of animated elements is simply to provide delight, making the website more engaging and evoking the fun side of our company culture. Lines in number blocks and testimonials subtly grow as the reader scrolls down the page, and the gear in our logo spins when the navigation menu opens.

Keeping focus on content

While they can provide both delight and practical function, animations shouldn’t get in the way of the user’s need to read content on the website. Though it’s becoming more common to see word-by-word or line-by-line animations, we chose to keep most text content static to improve readability.

In addition, timing was carefully considered. For elements that are likely to see more interaction, like buttons and links, we used shorter transitions to ensure they weren’t distracting. For elements that travel from outside the user’s center of vision, and for large objects that could be overwhelming when animated, we opted for slower, more lengthy timed variables. In cases where multiple pieces of a layout were animated together, like the list of highlights in our case studies, we used delays to offset timings, making motion more interesting and organic.

Animation as an extension of the Gravity Works brand

We kicked off the website redesign process in the summer of 2016, when the full Gravity Works team worked through the same creative brief that we share with many of our clients when starting a new project. In this exercise, we looked at other sites that inspired us and identified our brand values. We came up with the following groups of characteristics to describe our client work and team culture:

Trust, reliability, knowledge, and understanding from the members of our team
A collaborative, supportive process throughout the entire project and beyond, including project management, design, development, content, and post-launch support
A culture of learning and teaching, problem-solving, being flexible and open to new approaches, and caring about the work we produce

Responses to the Gravity Works team’s creative brief exercise. (photo: Kelsey O’Neill)

Though they may not seem directly correlated at first, animations and easing functions can reflect these brand qualities. For example, quick, soft movements can evoke energy and friendliness, while ease-in-outs can feel stable and reliable. We took more liberties on brand-focused and structural elements, like the logo and the menu, to show off our fun-loving side, while exercising more restraint on important calls to action for potential new clients seeking information.

Making motion a part of the development process

From a development perspective, the website’s animations made heavy use of a set of timing variables. Based on Salesforce’s Lightning Design System, we chose to use four animation timing variables in multiples of 100 milliseconds:

$spd-a: 100ms (instantaneous)
$spd-b: 300ms (fast)
$spd-c: 400ms (slower)
$spd-d: 700ms (deliberate)

In addition, we used three easing functions so animations can enter and exit the frame at peak velocity:

ease-out: when an element moves onto the stage, or into the reader’s cone of vision
ease-in: when an element moves off the stage, or out from the user’s cone of vision
ease-in-out: when an element moves across the stage, from one point to another

CSS animations used performant properties such as opacity, scale, color, and rotation, avoiding options like width and border. We were particularly careful with scale-based transitions: while a common treatment for the block-style featured project grid on the Projects page might have scaled up the logo, some of our projects’ logos were in PNG format, rather than crisp SVGs that could cleanly upscale. Instead, we used transition: transformY() to vertically move the logos, while animating a line horizontally within the block to help denote its purpose as a link to the project.

We used JavaScript animation library ScrollMagic to trigger many of those CSS animations as the reader scrolled down the page. Most of these animations are configured to begin as the element reaches the center of the viewport, but for those that are more involved, thus needing to start sooner, we triggered them as soon as the element became visible. For example, the phone and laptop transitions in the Detroit Metro Airport and SMART case studies are triggered earlier.

To prevent content from being impacted when JavaScript is disabled, we implemented a .no-js class at the top of the DOM that, when present, immediately triggered the same CSS animations that ScrollMagic would otherwise do while scrolling. This allowed us to keep the spirit of the animations in use while ensuring content was still accessible to users without JavaScript.

Sometimes, planning animation keyframes means moving from the keyboard to pencil and paper.

Ensuring accessibility

As we’ve previously mentioned, accessibility was an important factor throughout this process, as it is for all of our work. We adhered to WCAG 2.0 compliance standards throughout the site, paying special attention to animations. If animations move too quickly or impact large elements it can cause motion sickness or negatively affect readers with vestibular disorders.

This added a few accessibility-based guidelines to our animations, for example:

Hover states for links and buttons needed more than just color changes
Parallax effects on images were subtle and only used at larger displays
The automated word rotator in the homepage’s hero section needed a pause control

We also used the prefers-reduced-motion media query, which will stop the word rotator from animating when a reader has the option configured in their browsing preferences. And yet, these guidelines weren’t restrictive boundaries that prevented us from creating a well-designed, visually engaging website, making it clear that accessibility is not a barrier to innovation.

Moving forward

At Gravity Works, we’ve tightened our focus on animations, but creating, documenting, and implementing this set of guidelines for our new website was our most ambitious animation-related project to date. Doing so allowed us to plan ahead during the development process, resulting in animations that were cohesive and intentional. It also means that as we build out new case studies for the website, we already have a system to reference, making the development process more efficient and ensuring that new additions fit in with our existing pages. We’re excited to use these techniques in the future for other client projects!