In the digital world, animation is one of the most powerful, attention-grabbing ways to tell a story. But the prospect of animating a design can be intimidating or overwhelming, especially for novice designers. That’s why Adobe Researchers, in collaboration with the product team for Adobe Express, created Animate All, a new feature that lets Express users add high-quality animations to their designs in just one click. Animate All was unveiled at Adobe MAX last fall.
“If you’re a storyteller, you want your story to be engaging, and animation is one of the best ways to do that. It’s great for a presentation or an Instagram post—I even want invitations for my son’s birthday party to be animated,” explains Senior Research Scientist Cuong Nguyen, whose work is at the core of Animate All.
The goal behind Animate All is to make it easy for Express users to create animations that are polished and professional, without having to learn the ins and outs of animating by hand. “Research shows that customers want to add motion to their designs, but they think it’s going to be complicated, or they don’t know the terminology and tools,” adds Senior Experience Designer Seth Walker, whose work helped shape the foundations of Animate All. “We knew that a simple feature that could help people animate would be very desirable.”
How users create with Animate All
When users want to animate a design with the new Animate All feature, they begin with a static document in Adobe Express. Animate All allows them to choose from five preset animation styles with just a click. From there, the technology choreographs an animation based on AI and a unique animation algorithm that Nguyen and Walker developed together.
Users also have the option to edit at a more granular level, making decisions about how individual components of the design flow into the animation.
Researchers tapped into AI and human expertise to power Animate All
The research behind Animate All first began two summers ago, when Walker and Adobe Research intern and GEM Fellow Sofia Ozambela were exploring ways to use LLMs—large-language models, a form of AI—for animation. From there Walker, who’s trained as a 3D animator, built a prototype that could animate static images.
“The problem was that our results were inconsistent, which is a common challenge for LLMs,” he says. “And that’s where Cuong Nguyen came in.”
When Nguyen joined the project, his first challenge was to help the model understand which elements of a design matter most. “To create a good animation, you have to know what’s important. It’s something an expert creator knows well, so we needed a model that could understand that and use the information to choose the right sequence for animations. For example, you want to animate a big title first, or if it’s a wedding invitation, you want to animate the photo of the bride and groom first.”
To tackle the challenge, Nguyen started with a model the Adobe Research team had already created in collaboration with MIT. The model was trained, based on human feedback, to produce a heat map of an image’s most important features. Then Nguyen began building prototypes that chose the order of animations based on a heat map’s interpretation of the different elements in a design—and he began collaborating closely with expert designers, including Walker, to get feedback on how the model was doing.
“The early feedback showed us that the AI model didn’t work perfectly out of the box. It wasn’t always picking the right important things, and it didn’t always know how to group objects together and how to get the timing of the animations right,” explains Nguyen.
To further guide the system on which items it should animate together, Nguyen created a clustering algorithm. The algorithm determines which elements are part of the same group. For example, the algorithm knows that if there are little stars around a big headline, they should all be grouped together in the animation. To help further refine the system, Walker designed a series of digital animations by hand, and wrote up rules and timelines so Nguyen could build in the essential elements for a professional look and feel.
In addition, the feature benefited from the expertise of engineer Kurt Heston and designers Christina Cox, Romero Alves, and Kath Nash from the Adobe Express product team. “Their insights were invaluable in informing the model and refining the animation rules,” says Nguyen. They worked closely with Nguyen and Walker, providing critical feedback and helping to ensure that the animations were both visually appealing and functionally seamless.
“In Research, we can focus on solving problems and delivering good technology, and then we have really amazing engineers and designers on the product teams who make sure that it goes that last mile and gets into customers’ hands,” says Nguyen.
To MAX and beyond
The world got its first glimpse of Animate All at this year’s Adobe MAX. “I was very proud of it,” says Nguyen. “Motion graphics has always been a big passion of mine, so seeing our feature at MAX was really cool, and now I’m even more excited about continuing to do the work.”
The Express team’s early customer data shows that Animate All is used in over 50 percent of Express projects that include animation. Researchers are now beginning to plan the feature’s future, Walker says. And Nguyen is already experimenting with AI models that will give users even more flexibility. “I’m excited about even more awesome features. In fact, right after we shipped, we were already meeting about what we could do for our next version,” he says.
Wondering what else is happening inside Adobe Research? Check out our latest news here.
