Written by Matic Pelcl and Rosa Trieu
Written by Matic Pelcl and Rosa Trieu
Many moons ago, (when Biscuit was still a puppy) we set out to provide a better way to animate. We found that animations were used in over half of all creatives built in AdCreator, but realized the process to build them could be time-consuming and prone to error.
We wanted to create a tool that was custom-tailored for animation in advertising, but would still feel familiar to animators who were used to more traditional tools. We discovered some similar patterns between animation across the ad industry and creatives that were built on the AdCreator platform.
Here are some of our findings about most animated creatives that shaped how Timeline was built:
1. They’re very short.
In advertising, even when we are granted the powers of animation, we still need to capture the audience’s attention in a short amount of time. Most creatives that used animation lasted an average of just 1.6 seconds and no more than 10 seconds. That’s why we decided to limit Timeline editing to maximum of 10 seconds of animation.
2. They are made up of scenes.
At least two-thirds of animation in advertisements were usually made up of objects sliding in and out (intros and outros), but we wanted to make interaction possible if and when users wanted it. This is why we went with the concept of scenes, which allow users to build a single creative with multiple variations.
In this scenario sketch, scene (S1) would loop until a button is pressed. Depending on which button was pressed (S3,4,5) a corresponding scene would fire, followed by the end scene (S2).
3. We needed dynamic keyframes.
We wanted our users to be able to “stitch” animations one after another, or continue in place of another. This is possible with a special keyframe that holds no value, because it inherits it from the object that it's about to move. However, because we do not want space and time to implode, only the first keyframe of any property can be dynamic.
Animation with dynamic keyframes
Animation with static keyframes
4. Starting with a layout.
When animating for HTML, unlike in any other closed environment, you have to define your elements before you can animate them. This is why we divided the layers panel into “Layout” and “Scenes” tabs.
One of the early sketches that outlined Scene functionality. An event triggers the “play action” which in turn plays the scene until it stops by itself (on its last frame).
5. Instant preview is a must.
When we looked to introduce a timeline tool, it was obvious to us that it had to come with a live preview.
Another major improvement was the ability to instantly preview animations and make frame-by-frame edits. Users can now edit your animation in Timeline the same way they would in any video editor.
6. Green is for animation.
After introducing the Layout/Scene switch and running it through user testing we learned that many of them had problems discerning layout and scene mode. Since we went with a green highlight color for keyframes we thought it only natural to highlight the rest of the affected properties and objects in green.
We chose green as the keyframe highlight color because it typically denotes motion. Later, based on user feedback, we expanded on that and used it on everything that had to do with animation.
7. The background is usually moving.
We also noticed that many ads had ambient objects moving in the background. This is what inspired us to create our particle-based Ambient components.
The most challenging, yet rewarding aspect of this project was working under the innate constraints of advertising — after all, creatives must be planned out so that you get the effect you want with as few resources as possible. Timeline was not a new tool in the market, but making one that was specifically built for advertising set us on a path to discover how having limitations can yield something extremely creative and unique.