AnyAni: An Interactive System with Generative AI for Animation Effect Creation and Code Understanding in Web Development

TL;DR

AnyAni is an interactive system that leverages generative AI to assist front-end developers in designing, understanding, and implementing web animation effects through a collaborative, iterative workflow.

Contribution

The paper introduces AnyAni, a novel human-AI collaborative system that supports animation design and code understanding, addressing challenges faced by developers without professional design backgrounds.

Findings

AnyAni is effective in supporting animation effect creation.

Developers found the system easy to learn and use.

The system enhances understanding of generated animation code.

Abstract

Generative AI assistants have been widely used in front-end programming. However, besides code writing, developers often encounter the need to generate animation effects. As novices in creative design without the assistance of professional designers, developers typically face difficulties in describing, designing, and implementing desired animations. To address this issue, we conducted a formative study (N=6) to identify the challenges that code developers face when dealing with animation design issues. Then, we introduce AnyAni, a human-AI collaborative system that supports front-end developers in the ideation, manipulation, and implementation of animation effects. The system combines the assistance of generative AI in creative design by adopting a nonlinear workflow for iterative animation development. In addition, developers can understand and learn the code generated for implementing animations through various interactive methods. A user study (N=9) demonstrated the usability of AnyAni in animation effect creation support for developers.