• Table of Contents

Screen Type Overview

MBTA screens vary depending on their location in the system, their size, and the user need they’re intended to meet. Content types across these screens also vary, including how and when we use animation.

Generally, animation falls into 3 categories:

1. Dynamic content that is driven by code. It only animates CSS properties, such as size, position, opacity, and color. Examples include real-time predictions.
2. Pre-rendered content created in video production software, like Adobe After Effects or Premiere. Animations can be more advanced and complex, for content related to marketing, weather, events, planned disruptions, or live action videos.
3. Static content that pages between screens, but cannot be animated due to technical or legal restrictions. Examples include any content on E-Ink, LEDs, and Digital Urban Panels.

Timing

Framerate

All pre-rendered content for Outfront Media screens should be exported at 30 frames per second.

Animations should appear as smooth as possible and should not stutter, jump, or skip frames.

Speed

The ideal duration for most user interface animations is around 200-300ms. This fluctuates with screen size. On smaller screens, components occupy a larger portion of the screen and appear to travel smaller distances. On larger screens, they appear to travel further. For this reason, animations that travel across a small area of the screen should have shorter durations than those that travel across large areas.

In addition, animations that remove or close an element can be quicker, as they require less user attention than information that remains on screen.

Easing

In real life, objects do not move at perfectly linear rates. Animations should use easing to appear more realistic. In most cases, easing should be applied to both ends of an animation (also known as ease-in-out). In addition, when multiple elements on a screen move simultaneously, their easing should be synchronized.

Motion Blur