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

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.