Animation keyframes

Animation keyframes

On the Edit page of the Ad Builder, layers can be animated by adding keyframes in the Animation Timeline, which opens and closes from the bottom of the screen.

At this stage there was only one way to update the styles of a keyframe. Opening the Animation Timeline, scrolling through a layer’s timeline to the keyframe, selecting it and editing the styles from the Settings Panel.


With the Edit page being used on smaller screens like laptops, it would often be that the user would close the Animation Timeline to give themselves more canvas to work with. However, there was no visual relation between the Settings Panel and the Animation Timeline. The issue being that when viewing a layer’s animated styles, while the Animation Timeline was closed, it was hard to know which keyframe or point in time these styles represented.




The keyframe information from the timelines needed to appear in the Styles tab of the Settings Panel.

We experimenting with a simple select box and it worked out well as it allowed for potentially lots of keyframes that would be included in a complex animation.




The select box could have been labelled Keyframes or Select a keyframe. However, by going for a label like Style for, it neatly combines the label and the selected option into readable sentences that work for all scenarios.

“Style for Background image at 0.5s”
“Style for Keyframe at 2.0s”
“Style for All keyframes”


The keyframe select box did the trick, but there was room to take it further. If the timeline was scrubbed to a point in time with no keyframe, we could provide the user a way to add a new one.

An “Add keyframe” icon was placed below the select box with the current scrubber time written next to it as reassurance of the new keyframe’s time.



The user could now traverse through a layer’s animation keyframes from the Settings Panel. They could easily tweak keyframes as needed and even add new ones. With this the Settings Panel and the Animation Timeline were in a way linked, giving a better reference to a layers animation settings while editing its styles. All the while with more canvas space to work with since the Animation Timeline was closed.