Table of Links
Abstract and 1 Introduction
2 Related Work
2.1 Program Synthesis
2.2 Creativity Support Tools for Animation
2.3 Generative Tools for Design
3 Formative Steps
4 Logomotion System and 4.1 Input
4.2 Preprocess Visual Information
4.3 Visually-Grounded Code Synthesis
5 Evaluations
5.1 Evaluation: Program Repair
5.2 Methodology
5.3 Findings
6 Evaluation with Novices
7 Discussion and 7.1 Breaking Away from Templates
7.2 Generating Code Around Visuals
7.3 Limitations
8 Conclusion and References
7 DISCUSSION
We have introduced an automatic approach for animation, which shows how LLMs can be applied to highly complex visual task involving canvas awareness, sequencing, and coordinated motion.
7.1 Breaking Away from Templates
Templates and presets are the standard approach to animation for novice designers and everyday creators. Beyond logos, they are the norm for applying motion to content of all kinds (e.g. slide presentations, videos, motion graphics, etc.), but from our needfinding, we found that they can be brittle and lack flexibility. LLMs can greatly open up the space of motion design to novice designers. They can start with an animation that is customized to their content rather than working backwards to make a template work for them. This approach can benefit both novice designers, who can have an alternative to searching for templates and template creators, who have to continually come up with new ways to populate template galleries. Furthermore, LogoMotion showed that novices could quickly find animation options that they were satisfied with and customize animations with ease using natural language.
7.2 Generating Code Around Visuals
We focused on code generation for animated logos, a highly specified kind of design artifact for which we made design assumptions (e.g. the presence of a primary element). However, there are many more design patterns and types of logos and layouts that LogoMotion could expand upon. For example, LogoMotion’s LLM method could also be applied to layouts such as social media square posts (e.g. flyers), email banners, and digital flyers. Each format has different “rules” and design norms. For example, the zero-to-hero effect that was necessary for logos is not as relevant for these other forms of visual communication, which can be more text heavy and prioritize the message getting across (therefore necessitating more minimal or subtle animation). A next step for this work could be to look at how the prompts, which are embedded within this pipeline, can be changed depending on the layout type to make the pipeline more flexible overall.
Additionally we found that the design concept stage was important in many respects. This stage created a tighter coupling between the image layers and their semantic content and gave the code more scaffolding for how it could be implemented in terms of translation, easing, timing, and duration. Additionally, in our early exploration with prompts in the pipeline, we found that when queried the model multiple times on the same layout, without a design concept, the LLMs would tend to produce same or similar animations run after run (e.g. a car would slide in from the left slide of the screen each time). The design concept stage helped diversify the range of design options presented to users. It is also a novel instance of how a technical specification for code can be provided in narrative form (a story for the design elements) rather than as a technical specification or pseudocode, as it is often done in code generation literature.
