How to Animate Illustrations for Websites for free

As a studio that lives and breathes design, we've always faced a tough choice: keep our illustrations static and clean, or spend thousands of dollars and weeks of time on custom Lottie animations.

For SaaS landing pages, blog posts, and onboarding flows, that cost and friction have almost never been worth it. A single 5-second Lottie animation can run $300–$500. Animating an entire illustration pack? Forget about it.

That entire workflow just became obsolete.

In the last few weeks, new AI tools—specifically Google's Veo and the new image-to-video feature in xAI's Grok have completely changed the game. We can now create smooth, loopable animated illustrations from any purchased illustration pack in seconds.

The results aren't as precise as a hand-crafted Lottie, but they are incredibly fast, practically free, and perfect for bringing your website to life. This is your complete pillar guide—from one design team to another—on how to do it right.

✨ Create Animated Illustrations for Websites for Free using Grok and Google Veo

Yes, you can animate your illustrations for free. Here’s how:

• Grok offers free image-to-video generations for X users (with daily limits).
• Veo 3 is available via free credits/trials in tools like Google AI Studio or the Google AI Pro plan.
• The only cost you really need is the illustration itself (you must legally own it).

This means you can take a purchased illustration pack, upload a PNG, paste a simple prompt, and generate animated website assets with zero animation budget.

For startups, SaaS teams, indie hackers, designers, and bloggers, this is a huge win.

Why Animate Your Website Illustrations?

Your analytics show high search demand for terms like “SaaS illustrations,” “website illustrations,” “vector illustrations,” and “illustration pack.” Adding motion to these visuals increases their value dramatically.

• boosts time-on-page
• reduces bounce rate
• guides attention toward key CTAs
• explains product workflows visually
• strengthens brand personality

Motion is especially effective on SaaS landing pages, where complex concepts must be communicated quickly. It's one of the key emerging illustration styles shaping the future of modern web design.

You Must Own the Rights Before Animating

Before animating, you must own commercial rights to the artwork. If you're using Getillustrations products, all purchased illustration packs include permissions for animation, GIFs, video, and motion graphics.

You cannot animate illustrations you do not legally own.

Grok vs. Veo vs. Lottie :What’s the Difference?

Grok (xAI)

• ideal for quick, stylized animation
• best for simple colors, strong contrasts, and minimal motion
• works extremely well with pixel-art, halftone, and line-art illustrations
• available free to X users (with limits)

Gemini Video Generation (VEO)

• smoother motion than Grok
• handles gradients and shading better
• ideal for “cinematic micro-animations”
• available via free trials/credits

Lottie (Traditional Animation)

The most complicated option and needs a lot of experience and steep learning curve of both how to deal with vector files and how to animate using lottie.

• perfect vector-clean motion
• lightweight JSON files
• expensive and time-consuming
• requires an experienced animator

Use AI when you want fast, affordable motion. Use Lottie when you need perfect shape-based animation.

Prepare Your Illustration Before Animating

This is the most critical part of the process. How you prepare your artwork will determine the quality of the final animation. You have two main methods for handling the background.

1. Choose a Simple, Clean Illustration Style

AI animation works best with clean vector illustrations and minimal color schemes. When you're browsing for an illustration pack, look for styles that have 1–8 colors, strong shapes, and minimal noise. This simple approach to illustration design yields the best results.

Works great with:

• pixel art
• flat vector scenes
• halftone / dotted shading
• monochrome or duotone styles

Want to test this workflow for free? Start with our Loomies free vector illustrations or free 3D app icons.

Method 1 (Simple): Match the Background to Your Website

This is the fastest, easiest way to get a seamless result. AI tools cannot export transparent video, so your animated illustration must have a solid background.

Simply set the background color of your illustration to the exact HEX code of the website section where it will be placed.

• hero section with off-white → use #FAFAFA in your PNG
• dashboard module with light blue → use your product's UI color
• feature section with neon green → use that exact shade

This ensures the video blends perfectly and doesn’t look like a "boxed" video since the background is not transparent so this box will just appear on your website or design if the colors does not match.

Method 2 (Advanced): Create a Transparent Background

This is the "pro" method for making your animation fit anywhere, like on top of a gradient or complex page background. You will animate with a solid background and then remove it afterward.

1. Prepare your PNG with a high-contrast background color (a "green screen") that isn't used anywhere in your illustration. Bright green (#00FF00) or blue is perfect.
2. Animate your illustration using Grok or Veo. You will get an MP4/WEBM file with a solid green background.
3. Remove the background using a "video background remover" tool. This will give you a new video file (usually WEBM or a MOV with an alpha channel) that has a true transparent background.

Here are some of the best online tools for this final step but set your expectations correct, the background removal is never perfect ..this is why i would recommend using the color of background you like from the beginning.

• Vmake.ai
• Adobe Express
• Unscreen.com
• CapCut (Web)
• Kapwing (Chroma Key Tool)

Our recommendation: Use Method 1 for speed. Use Method 2 when you need a perfectly integrated animation with no background. Yet sometimes the accuracy of the transparent background is not 100% because there is small points like hair or patterns that will be in the way.

4. Export as High-Resolution PNG

• PNG only
• 2000px or higher
• crop tightly around the subject

5. Upload to Grok or Veo

Now you're ready to animate.

Examples for The Perfect Prompts for Grok & Veo (Copy/Paste)

Prompt for Clean Vector Illustrations

The illustration used is from our new Humano illustrations Pack

Animate this illustration with a subtle walking-loop motion. Keep the same flat line-art style. Add a gentle sway to the body, slight movement in the legs as if walking, small bounce in the hair, and a light swing of the handbag. Movement should be minimal, smooth, and seamless, without changing the character’s design or proportions.

Prompt for Line-Art or Halftone Styles

Animated illustration is from Grain illustration pack

Animate this robot in a panic mood with quick, jittery movements. Add a fast shake to the head, make it subtle. Keep the original line-art style, proportions, and colors exactly the same. Make the motion loop smoothly and avoid distortion or new details.

Prompt for a Scene with Multiple Characters

You can see that the more characters are in the illustration the animation gets fuzzier and hard to control all the little details notice the 3rd black window behind the girl. This illustration is from Aurora Team illustrations pack

Animate this illustration with a subtle teamwork motion. Make the characters gently move their hands as they pass the papers, add a small bounce to the checkmark above them, and include slight head and body movements. Keep the original flat textured style, colors, and proportions exactly the same and the main structure of the scene. Make the animation smooth, minimal, and loopable.

Prompt for Abstract Illustration Animation

Abstract illustrations are the easiest to animate! this illustration is from Mosaic Patterns illustration pack

Animate this abstract illustration with soft, playful motion. Make the shapes gently bounce and wiggle, and add a floating drift to the small dots around them. Keep the original flat, colorful style, smooth curves, and proportions exactly the same. The animation should be minimal, loopable, and feel light and cheerful.

Set Realistic Expectations

AI animation is not Lottie and cannot animate vectors layer-by-layer. Before you begin, set your expectations properly:

• slight wobble or flicker may occur
• subtle motion produces the best results
• complex gradients can shift
• no native transparent background support (but you can work around it)
• no per-layer control

How to Export Your Final Animation

MP4 (Best for most websites)

• smoothest animation quality
• great for hero sections
• universally supported

WEBM (Best for SaaS product UI)

• tiny file sizes
• fast loading
• excellent clarity
• this format supports transparency if you use Method 2

GIF (For 1–8 color illustrations, How to Optimize It for Free)

If your illustration has a minimal palette, like many Getillustrations packs, AI animations can be converted into small GIFs for ultra-fast loading.

If your illustration has a minimal palette (1-8 colors), a GIF is an excellent choice. It's universally supported, auto-plays everywhere (including emails), and loads instantly.

But a raw, unoptimized GIF file from a video can be massive—often 5-10x bigger than an MP4. The key is to optimize it.

We recommend the free, powerful online tool ezgif.com. It’s our go-to for this entire workflow.

Here is the step-by-step process using ezgif.com

1. Go to ezgif.com and click on the Video to GIF tool.
2. Upload your MP4 file.
3. Set the options: The most important setting is Framerate (FPS). Your MP4 might be 30 FPS, but 10, 12, or 15 FPS is usually perfect for a simple illustration. This change alone will cut the file size in half (or more) with no real visual difference.
4. Click "Convert to GIF!".
5. This is the most important step: Below your new GIF, a menu of tools will appear. Click the "Optimize" (or "Opti") button.
6. Select an Optimization Method. We recommend starting with "Lossy GIF" and setting the "lossy level" slider to 30. This will smartly reduce the file size. For simple flat-color illustrations, you can also try "Reduce Colors" (set to 128 or 64).
7. Click "Optimize GIF!" and look at the new file size. You'll often see a 50-80% reduction from the original GIF with almost no visual change.

This 30-second process takes a 5MB GIF and turns it into a 500KB file that’s perfect for your website.

Complete Workflow Summary

1. Choose a purchased illustration from Getillustrations.
2. Decide on your background: either match your website color (simple) or use a "green screen" color (advanced).
3. Export as high-resolution PNG.
4. Upload to Grok or Veo.
5. Paste the correct prompt.
6. Download MP4/WEBM.
7. (Optional) If you used a green screen, upload your video to a tool like Vmake.ai or Unscreen to remove the background.
8. Embed the final video on your site.

How AI Animation Saves You Money

Traditional Lottie animation costs:

• $300–$500 per clip
• days of production time
• extensive design prep

AI animation (Grok or Veo) costs:

• $0–$10 (often free)
• generated in under 30 seconds
• no animation team required

You save hundreds per animation and can animate entire landing pages at a fraction of the cost.

FAQ

A summary of what we introduced and quick answers to remind you.

Conclusion

AI tools like Grok and Veo unlock a new world of animated website illustrations fast, affordable, and often free. With the right preparation (either matching your background or using a green screen), the right prompts, and proper expectations, you can turn any static illustration into a dynamic, loopable animation.

Start with a licensed, high-quality illustration pack, choose your background method, upload to Grok or Veo, and let AI handle the rest.