Ad Builder - Animation Timeline


Ad Builder - Animation Timeline

The Animation Timeline is used to add keyframes to animate layer style properties. It also doubles as a layers list, where layers can be reordered, locked, hidden and deleted.

The Timeline is in a drawer with a fixed height that opens and collapses from the bottom of the page. When the Timeline is open, it can take up a lot of the space and cover what the user is trying to animate on the canvas - something that made it difficult working on screens with limited vertical space like laptops.


The drawer would already open and close when the user clicked the top section of the drawer but we decided that the user should also be able to drag to adjust the height. We kept the click interaction because it’s a fast way to toggle the drawer open and users wouldn't expect to have to drag it closed.

We made the top section slightly larger, enough to fit an icon which would help represent the current state of the drawer. When the drawer was open, the icon was two short horizontal lines to help signify the drag affordance. When the drawer was closed, the icon was then a simple up arrow.

We wanted the drawer to feel like it was working with the user and remembering their preference, so the drawer also re-opens to the last height it was closed at.

The Timeline drawer remembers the last height

Because the drawer could be adjusted to any height, it was now possible to set a height that partially obscured the timeline scrubber and layer action buttons, which wasn't ideal. To solve this We gave the drawer a minimum height. If the drawer was closed while below this minimum height, it would reopen at the minimum height. In this way, the drawer is reset if ever set to a suboptimal height.

The Timeline drawer resets to a minimum height


Now that the drawer had a variable height, the user could adjust it to suit their needs. This allowed them to organise layers and add animation faster and more efficiently.


Other case studies:
Settings Panel
Asset Modal