Table of Links Abstract and 1 Introduction Abstract and 1 Introduction 2 Related Work 2.1 Program Synthesis 2.1 Program Synthesis 2.2 Creativity Support Tools for Animation 2.2 Creativity Support Tools for Animation 2.3 Generative Tools for Design 2.3 Generative Tools for Design 3 Formative Steps 3 Formative Steps 4 Logomotion System and 4.1 Input 4 Logomotion System and 4.1 Input 4.2 Preprocess Visual Information 4.2 Preprocess Visual Information 4.3 Visually-Grounded Code Synthesis 4.3 Visually-Grounded Code Synthesis 5 Evaluations 5 Evaluations 5.1 Evaluation: Program Repair 5.1 Evaluation: Program Repair 5.2 Methodology 5.2 Methodology 5.3 Findings 5.3 Findings 6 Evaluation with Novices 6 Evaluation with Novices 7 Discussion and 7.1 Breaking Away from Templates 7 Discussion and 7.1 Breaking Away from Templates 7.2 Generating Code Around Visuals 7.2 Generating Code Around Visuals 7.3 Limitations 7.3 Limitations 8 Conclusion and References 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. Authors:
(1) Vivian Liu, Columbia University (vivian@cs.columbia.edu);
(2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com);
(3) Li-Yi Wei, Adobe Research (lwei@adobe.com);
(4) Matthew Fisher, Adobe Research (matfishe@adobe.com);
(5) Timothy Langlois, Adobe Research (tlangloi@adobe.com);
(6) Seth Walker, Adobe Research (swalker@adobe.com);
(7) Lydia Chilton, Columbia University (chilton@cs.columbia.edu). Authors: Authors: (1) Vivian Liu, Columbia University (vivian@cs.columbia.edu); (2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com); (3) Li-Yi Wei, Adobe Research (lwei@adobe.com); (4) Matthew Fisher, Adobe Research (matfishe@adobe.com); (5) Timothy Langlois, Adobe Research (tlangloi@adobe.com); (6) Seth Walker, Adobe Research (swalker@adobe.com); (7) Lydia Chilton, Columbia University (chilton@cs.columbia.edu). This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license. This paper is available on arxiv under CC BY-NC-ND 4.0 DEED license. available on arxiv available on arxiv

Part of HackerNoon's growing list of open-source research papers, promoting free access to academic material.

Adobe

LLMs Are Changing the Way We Animate

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Analyzing LogoMotion Errors in Position, Scale, and Animation Logic

Turn Static Logos Into Dynamic Animations With AI

Your Next Animator Might Be an Algorithm

LogoMotion and the Art of Semantic Animation

How Designers Approach Logo Animation

How to Turn Your PDF Logo into Animated Web Content with LogoMotion

Analyzing LogoMotion Errors in Position, Scale, and Animation Logic

Turn Static Logos Into Dynamic Animations With AI

Your Next Animator Might Be an Algorithm

LogoMotion and the Art of Semantic Animation

How Designers Approach Logo Animation

How to Turn Your PDF Logo into Animated Web Content with LogoMotion

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps