How to make an animated SaaS demo without After Effects

You can get a polished animated demo from Figma, PowerPoint, an HTML page you screen-record, a recorder with automatic zooms, a freelancer or an AI tool. Choose by what you have most of: if it's time, build it yourself; if it's budget, hire someone; if it's neither, use a tool that does the motion for you.

By the Programmable team · Updated · 6 min read

This question comes up often among founders. A long Ask HN thread asks how people make polished demos with smooth zooms, and the answers range from recorders to code to hiring a professional. After Effects is a capable tool, and at US$22.99 a month for the single app on an annual plan, billed monthly, the subscription isn't the real obstacle. The learning curve is. Here are the alternatives.

The six routes compared

Prices were checked on 31 October 2026. The effort column is our judgement, not a measurement.

RouteCostSkill neededEffort for 30 sBest when
Figma Smart AnimateYour Figma planFigmaHoursYou have designs and a designer
PowerPoint MorphYour Microsoft planSlidesHoursYou want no new tools
HTML and CSS, screen-recordedYour own timeFront-endA day or moreYou're a developer who wants full control
Screen Studio$9 to $29 a monthGood recordingUnder an hour once rehearsedYou have a Mac and a working product
FreelancerFrom $1,995 on one listingWriting a good briefAbout two weeks of waitingIt's a launch and you have budget
AI from your screensFrom $29 a month on ProgrammableReviewing a storyboardMinutes of work, then a waitYou need several short films

Figma: Smart Animate

If your product already lives in Figma, this is often the quickest manual route. Smart Animate compares two frames and animates the layers they share, across position, scale, rotation, opacity and fill.

  1. Duplicate your frame so layer names match. Matching depends on the layer's name and its place in the hierarchy.
  2. In the copy, change what should move, such as a zoomed-in card, an opened panel or a new row.
  3. Connect the frames in prototype mode with a Smart Animate transition.
  4. Present the prototype full screen and record it.

Know the limits. Figma's help page says drop shadows, inner shadows and moving between shapes aren't supported and fall back to a dissolve, and new layers dissolve into view. A SaaS interface has plenty of shadows, so test one transition before you build ten.

PowerPoint: Morph

Morph animates objects that appear on two neighbouring slides, without separate animations. For a demo, that gives you a usable zoom using nothing but screenshots.

  1. Paste your screenshot onto a 16:9 slide, filling it.
  2. Duplicate the slide.
  3. On the copy, enlarge and move the picture until the area of interest fills the slide.
  4. Apply the Morph transition to the second slide.
  5. Add text boxes for labels, then play it full screen and record it.

Microsoft lists Morph for creating in Microsoft 365, PowerPoint 2021, PowerPoint 2019 and PowerPoint for the web. Charts don't morph, which won't matter if you're using flat screenshots. The result is a plain zoom, but plain zooms carry most of a demo.

HTML and CSS: rebuild the interface, then record it

Developers often take this route: build a simplified copy of the interface as a web page, animate it with CSS or JavaScript, and record the browser. It costs no money and the output is sharp at any zoom, since the text stays as text. It also takes the longest, and every product change means more work.

Keep the replica small. Rebuild only what's in shot, set the page to one exact size, and drive the sequence from a single timeline so you can replay it for a clean take. Code-based tools such as Remotion go further and render video from React. Check the licence first: it's free for individuals, non-profits and for-profit teams of up to three employees, and larger companies need a company licence.

A recorder that adds the zooms

If the product works and you can record a clean take, this is the best quality for the least effort. Screen Studio adds automatic zooms, smooth cursor movement and motion blur, at $29 a month or $9 a month billed yearly. It's for macOS only, and its site says there are no near-future plans for Windows. One commenter in the Ask HN thread records with Loom and adds the zooms in DaVinci Resolve. That also works on Windows, but it's more work.

You still need a clean take. That means a stable build, realistic data, and a rehearsed path through the product.

Hiring a freelancer

A specialist will outdo every other route here on craft, and will fix your story as well. One Contra listing for SaaS demo and launch animation starts at $1,995 with an estimated two weeks, including script and animated interface screens. Prices vary widely, so get several quotes.

You'll get a better film, and fewer rounds, if your brief includes:

  • The one-sentence purpose, from our guide to making a demo.
  • A timed script, or at least its word count.
  • Screens at full resolution, plus your fonts, colours and logo files.
  • Every size you need, agreed up front.
  • How many rounds of changes are included, and who owns the source files.

The drawback shows up later. When your interface changes, each update is a new job.

AI tools that work from your screens

AI video tools differ a lot, and many are built around presenters. Look for one that uses your real screens, not stock clips.

Programmable takes up to eight screenshots, Figma frames or a screen recording, proposes a storyboard you can edit, and animates it as a 15, 30 or 60-second film. A typical directed film uses about 63 credits, and the Starter plan at $29 a month includes 350, or about five films. Pricing has the current details, and the product demo help article lists what it accepts. If you'd like to judge the motion before signing up, the browser screenshot tour works with up to three screens. Our product demo use case shows what comes out.

It's the wrong choice if you need real footage, a webcam, a presenter or more than 60 seconds. A one-off, high-stakes launch film may also deserve a human specialist.

What makes any of these look polished

The tool matters less than a few habits. These are craft rules of thumb, so break them when you have a reason.

  • One thing moves at a time. Zoom, then let the cursor click, then let the result appear.
  • Ease every move. Things in the real world speed up and slow down. A linear zoom looks mechanical. Use an ease-in-out setting where your tool has one.
  • Hold after a move. Give the viewer a moment to read before the next one. Beginners nearly always cut too soon.
  • Keep to a few zoom levels. Using the same two or three scales makes a film feel designed.
  • Crop out your browser. Unless the browser is the point, show the product alone, on your brand colour or a quiet background.
  • Slow the cursor down. A real cursor darts. A demo cursor takes a direct, unhurried path.
  • Use realistic data. No amount of motion rescues a table of "Lorem ipsum".
  • Make it short. A tight 30 seconds looks more expensive than a loose 60.

How to choose in one minute

  • Developer with free time and one demo to make: HTML, or Figma if the designs exist.
  • Mac, working product, happy to rehearse: a recorder.
  • No budget, no design tools: PowerPoint Morph.
  • Launch with a real budget: a freelancer.
  • Regular demos for several features or audiences: a tool that generates them, because rebuilding by hand each time won't last.

Whichever you choose, start from a timed script. These 15, 30 and 60-second demo scripts give you the word counts.

Common questions

Is After Effects worth learning for one demo?

Rarely. It rewards months of practice, and one demo won't repay that. It makes more sense if motion design will be a regular part of your job, or if you need effects that none of the routes here can reach.

Can I make an animated demo for no money at all?

Yes. HTML and CSS with a free screen recorder costs only your time, and so does PowerPoint if you already have it. Programmable's browser tour also needs no account, for a quick film from up to three screenshots.

Will people notice the demo isn't real footage?

Often, and that's fine as long as it shows what the product really does. Avoid showing features that don't exist or results it can't reach. A polished reconstruction of a real workflow is common practice. A fictional one is misleading.

What about Lottie or Rive?

They're good for small interface animations on a site, such as an icon or a loader. A full demo is usually better as video or an embed. Programmable doesn't export Lottie.

Sources