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

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

01.

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).

Examples of Adobe Lightroom tutorial screens.
No items found.
No items found.
No items found.
No items found.
No items found.

02.

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.

Adobe Lightroom color mixer tutorial.
No items found.
Adobe Lightroom Target Adjustment tutorial.
Adobe Lightroom Tone Curve tutorial.
No items found.
No items found.
No items found.
No items found.

03.

No items found.
No items found.
No items found.
No items found.
No items found.

Contact Us

Interested in working with us? Get an estimate or send us a message.

🖥

🔎

🤖

👾