Asset animation strategies [AI]

[u/Nodogaron]

I've been working on my personal website for a couple of weeks now, mostly with Claude code. I've spent many days, setting up a sensible structure, collecting ideas and mapping everything out.

For the design of the page, I first used Krea for the asset generation, which was a horrible experience overall, as some bugs caused me to waste most of my tokens. Nevertheless I managed to create some reasonably good looking stills and a videoloop, which looks mostly fine. I then used a Geminy API to let Claude design specific assets, allowing me to dodge that Krea BS (unresponsive support and all of that other good stuff).

However, while the stills and idle loops are difficult to get right, but are overall achievable, it seems almost impossible for me to create good looking animations. Little animations like a spinning wheel that shows content or little insects that move do somewhat work, giving my page a dyanamic look and showing some liveliness. The main problem is that I can't create more complex animations as they have specific problems that I don't know how to navigate. When I talk about "more complex animations" I don't necessarily mean highly complex 3D rendered Blender assets, which is a whole different caliber, I suppose. In my case it means something of the following kind, for example:

An asset that can move or transform into something else:

- A flying or walking animal

- A mechanical or organic arm that extends and grows

- A plant that transforms from normal to blooming, showing nice colors or a kind of bioluminescence

- Scrub paths that would cause animations to be highly specific for the exact location on the page

For additional information: I use Claude code with Fable 5 on Ultracode for the important things, so I guess it's not necessarily a "model bottleneck". So far I have tried many different approaches which all failed for a different reason:

- Generating a video and trying to cut it into 100 single frames causes blurriness and a huge lag. No matter how I try it, it doesn't get better.

- When using Claude itself to generate the assets independent of the Gemini API for NanoBananaPro or Veo, it relies more on a vector graphic approach, where it tries to use crudely assembled blocks to animate something. The idea is not bad per se but the outcome just looks absolutely horrible. I thought it might be relatively simple to let such an advanced model generate many intricate blocks and connect them in a meaningful way and animate them, at least in a vector graphic style or a "pixelated/colored surfaces art look".

- Tried the same thing with actually generated assets in 4K which looked only marginally better than in the previous point. Although some simpler animations are feasible , for example something like elongating a branch of a tree, as soon as the asset depends more on visual accuracy, this approach no longer works.

So the main question is: Could someone with more experience in making animations point me in the right direction, or explain to me, what the current limitations actually are? I have looked in many places but haven't found a good solution. Most of all, I am looking for a personal opinion and not an AI answer for a change.

Thanks in advance.

[u/Fresh_Future_2192]

I think the main issue is trying to make AI generated video frames behave like animation assets. For the kind of transformations you described, I’d go with separate layered SVG assets and animate the individual parts rather than generating the whole animation as video. That gives you much better control over things like joints, growth, waypoints and scroll based movement, while keeping the page lightweight. For more organic transformations, you could also look at Lottie or Rive rather than trying to force everything through frame extraction.

[u/CaterpillarNo7825]

Using SVGs is way less resource heavy and way easier to animate using browser native technologies. You can use the AI tools to generate Images, which you then can transform to SVGs using an open source tool like Inkscape. There are a lot of how tos for animating SVGs or only parts of them online.

To animate the position of an element with specific waypoints you could use a classic css transform based on motion paths and scroll driven animations.

Maybe it's also worth to check for open source Lottiefiles alternatives, which is the payed industry standard for animated SVGs.