How we Animate Product Updates at Highlight

At Highlight, we make it our goal to add sparkles to our product updates when we can. One way we do this is by sharing product updates with dynamic animations rather than with static images. This allows us to tell the story of a product update in its entirety, something that we wouldn't be able to with just an image. We use these animated stories when sharing to Twitter, LinkedIn and directly to customers in our product. Below are some examples:

Although our approach to making these animations may be unique, this is definitely not a new concept. Having been in the startup space for quite a while, we were heavily inspired by other companies such as Retool and Github. Nonetheless, we're excited to share our approach to creating our animated stories!

Tools / Requirements

Below are the requirements for this tutorial. At Highlight, we all have macbooks, but any operating system should be fine as long as you have the appropriate software installed!

1. A screen recorder (We use QuickTime Player on Mac)

1. A video editor that supports keyframes (We use Adobe After Effects)

1. Note: After Effects is generally overkill for creating these; some alternatives include descript, blender, and shortcut.

The Script

The first step is creating a plan for the story you want to show off. You should be able to record the clip in less than 15 seconds with the goal of making a story that is about 5 seconds in length after cuts and speed ramps.

Recording

When recording, make sure that you keep in mind what you want to show to your audience, as this will inform what views you focus on. Here's another set of tips to keep in mind depending on what you want to optimize for with your clips:

1. Record the beginning and ending so you can create a looping video (no real reason other than it's oddly satisfying)

1. Use a mouse instead of a trackpad (we're more accurate and have smoother motion with a mouse)

1. Make sure you're not recording any sensitive information

Editing

Editing is the last step in the process, but perhaps the most important! Below are the steps to follow, and as mentioned earlier, although we use After Effects, there are quite a few other tools that play the same part.

1. Import your recording into your video editor

1. Set the video canvas resolution (we use 500x500 as a default); this depends on where you want to show the animated story. Different platforms UIs are optimized to render media at different sizes. You can read this guide for more info on size choice.

1. Optional: Set your recording layer to 3D mode if you want to do any 3D effects.

1. Add speed ramps: Speed ramps are used to speed up portions of your video. I usually speed up the video by 200% (because we're slow at recording mouse movements and keyboard input). We also will sometimes go up to 400% depending on what's on-screen.

1. Add keyframes: We use scale, position, opacity, and rotation often.

1. Export to .gif and .mp4. Why both? We prefer using .mp4 where possible and .gif as a fallback. Most platforms give you analytics like view count for .mp4s but not .gifs. .mp4s are generally a lot smaller size-wise compared to .gifs as well.

Video Examples

Below is a video of what the story looks like with added key frames.

Below is an example of what the editing process looks like in After Effects.

Tips on Engagement

There's no "right" way to edit your video. Every edit is different depending on what's recorded, and some "plots" for the stories will be pretty stale, but necessary. In those cases, we can add "sparkles" by playing with the perspective of the recording. A simple rotation will take a boring pan and add a little more wow.

Here's an example: the left is without a 30° tilt and the right is with a 30° tilt.

Aaand that's pretty much it! Hope this helps you add some sparkles to your product updates.

If you end up creating animated stories, I'd love to see them! You can reach me on Twitter @JohnPhamous.

--

Until next time, ✨ . Thanks to jsjoeio for reviewing the draft!