From adding dynamism to an onboarding flow to providing delightful interactions, animations are a powerful tool that can be functional, entertaining, and core to brand identity. Motion can help a brand be more memorable and expressive in the same way as art direction in photography or bold typography.
As a Front-End Engineer at Loom, I’m always looking for new ways to fuse together creative and technical thinking to bring web pages to life through animations.
Collaborating with designers to create compelling animations is one of the most enjoyable parts of my job, but it isn’t without challenges. It can be difficult to articulate what I’m envisioning, especially in text. It’s not uncommon to say something along the lines of, “First, this panel over here slides and fades out. Then this block reveals this text over here.” Yeah — not very helpful.
And the more complex the animation gets, the more confusing the conversation can become.
Asynchronous communication with video messages via Loom allows me and my teammates to express exactly what we’re thinking, which keeps us all on the same page and helps us collaborate on animated components more efficiently without compromising on creativity.
How video messaging helps us create animations
A lot goes on behind the scenes when it comes to creating a web animation.
First, we define areas that could use an animation. Maybe a micro animation would be a nice touch to change an icon between an expanded and collapsed state. Or a more complex storytelling animation could complement text in a website’s hero. Collaborating on complex projects like web animations is where I think Loom really shines!
With Loom, I can simply drag items around in Figma or pull up an example from another website without having to struggle to come up with the words to describe them. I can also rely on non-verbal cues, like hand gestures, to emphasize an element growing larger or shrinking down, to get my point across faster.
Video messaging is a powerful tool as we move into the brainstorming phase, showing possibilities around what could happen on the development side and analyzing whether it can be done in a smooth or performant way.
Once an idea becomes more tangible, it’s ready to start implementing in code and we can see how a piece feels interacting with it in the browser. I usually start by separating out the visual elements to be animated from design mockups using SVGs where possible. Then the fun begins! With the help of CSS and/or JavaScript, little by little it starts to come together.
Because Loom creates a shareable link as soon as I’m done screen recording on my mac, anyone on the team can take a peek. They can refer back to it at any time and increase the playback speed up to 2x, allowing them to digest the message on their own time (which is particularly helpful when working on a distributed team). Collaborating asynchronously also gives everyone a chance to ruminate on an idea, ask questions, and provide thoughtful feedback, reducing the back-and-forth that can occur when working with multiple stakeholders on a project.
Designers and developers: no longer a house divided
Given my work, bridging the communication gap between designers and developers is a topic I’m invested in (and one that I have spoken about previously). Design and development influence and depend on each other, but without an effective way to share and get feedback on what we’re working on, these functions can be siloed. Working together supports the ultimate goal of delivering better user experiences — and asynchronous video makes arriving at an outcome that satisfies everyone’s vision possible. From conceptualization to creation to delivering feedback, with video, the process of making captivating animations has never been easier.