Adobe Lightroom Animations

How JSON animations can be used to advance onboarding tutorial animations

Explore

With Adobe Lightroom coming to iOS and Android, the Lightroom team needed onboarding animations that were compact enough for an app experience. JSON files would allow the developers to take advantage of smaller file sizes, crisp vector visuals, and easily update their animations in the future.

How We Helped

  • Recreated existing animations and exported as JSONs
  • Created new animations for new features

01.

Expanding the tooltip library

When tackling all of the animations, the on boarding animation tooltips were standardized and expanded upon. Previous features and tools that didn’t have visual explanations were given animations to accompany and unify them with the old animation set.

02.

Recreating and refreshing old animations

By recreating old tutorials frame-by-frame in After Effects, the UI changes were implemented. Tutorials that didn’t previously show dynamic UI animations (i.e. Color Mixer, Target Adjustment, and Tone Curve) were also created during this stage. Lottie and the AE plugin, Bodymovin, were then utilized to export the animations as JSONs. This significantly reduces file sizes, as opposed to certain alternatives (we’re looking at you, GIF).

Related Blog Posts

View All