How to Embed an Animation in Framer

Motion is the fastest way to make a Framer hero feel alive, but Framer's built-in effects do not cover every loop you might want. A Framer embed animation solves that: you build the loop somewhere else, then drop a small piece of self-contained code into Framer with an Embed element. The page renders it in preview and on the published site, with no plugins and no build step.

This guide is for designers and marketers who want a custom looping animation in Framer without writing it from scratch. I will show you how to build a seamless loop in Zepixo Loops, copy the embed snippet, paste it into a Framer Embed element, size it, and publish. By the end you will have a polished, accessible loop running in your Framer hero.

What you will learn

• What an embed is and why Framer supports it
• How to build a seamless loop in Zepixo Loops
• How to copy the self-contained embed snippet
• How to paste it into a Framer Embed element
• How to size and position the loop in your hero
• How to publish and confirm it works on the live site

Why embed an animation in Framer?

Framer is a strong design tool, and its effects panel handles hover, scroll, and appear animations well. But a custom seamless loop, like a marquee or a gradient wave, is easier to build in a dedicated loop studio. An embed lets you bring that loop in without rebuilding it.

An embed is a small block of HTML and CSS that the browser renders inside your page. Because the snippet is self-contained, it carries its own styles and motion. You do not wire anything up in Framer, you just paste and size. That keeps your project clean and your loop portable.

Step 1: Build a loop in Zepixo Loops

Zepixo Loops is a studio for building seamless hero animations and exporting them as MP4, WebM, and a copy-paste embed snippet. You start from a template, adjust the motion, and export a self-contained piece you can paste into Framer. No timeline expertise is required.

1. Open Zepixo Loops and pick a style, such as marquee, carousel, or gradient wave.
2. Set your brand colors, including an indigo accent if it fits.
3. Add your content, like logos, words, or a headline.
4. Tune the speed until the loop feels calm and the seam is invisible.
5. Preview it, checking the loop point and the reduced-motion fallback.

The studio handles the seamless loop math and the accessibility guard, so you focus on look and feel. For the basics, see our Loops overview, and for the wider context read our looping hero animations guide.

Step 2: Copy the embed snippet

Once the loop looks right, you export it as code rather than a video. In Zepixo Loops, click Copy embed code. This copies a self-contained snippet to your clipboard, ready to paste anywhere.

The snippet includes the motion, the styles, and a reduced-motion guard, so it respects visitors who ask for less motion. You do not need to add any libraries in Framer. For the full list of export options, see the Loops export reference.

What is in the snippet?

The snippet is a small block of HTML with inline styling and a CSS animation. It is scoped so it will not clash with the rest of your Framer page. Because everything travels together, the same code works in Framer, Webflow, or a plain HTML page.

Step 3: Add an Embed element in Framer

Framer accepts custom code through an Embed component, which is the official way to drop in third-party HTML. You add the element, paste the snippet, and Framer renders it. Here is the flow.

1. Open your Framer project and go to the hero section.
2. From the insert menu, add an Embed element to the canvas.
3. Choose the HTML option in the Embed element's settings.
4. Paste the Zepixo snippet into the code field.
5. Framer renders the loop in the canvas preview.

Framer's own documentation covers the Embed element in detail, so if you get stuck, check the help center at framer.com. The Embed element is the supported path for custom HTML, and it is exactly what the Zepixo snippet expects.

Step 4: Size and position the loop

By default the Embed element may not fill the hero. You size it like any other Framer layer, by dragging the handles or setting width and height in the properties panel. For a background loop, stretch it to fill the section.

If the loop sits behind text, send the Embed element to the back so the headline stays on top. Keep the text readable by checking contrast against the moving background. A subtle loop almost always reads better than a busy one.

Step 5: Preview and publish

Framer shows the loop in the canvas, but always check the live preview too. Open the preview window and confirm the animation plays smoothly and the seam is invisible. Then publish the site so the loop goes live.

1. Open the Framer preview and watch the loop point a few times.
2. Resize the preview to test phone and tablet widths.
3. Turn on reduced motion in your system settings and reload to confirm the fallback.
4. Publish the site from the top right of Framer.
5. Open the live URL and confirm the loop plays on the published page.

Once published, the loop runs in your live hero with the reduced-motion guard intact. If you change the loop later, re-export from Zepixo and paste the fresh snippet over the old one.

Ready to add motion to your Framer hero? Open Zepixo Loops, build a seamless animation, and copy the embed snippet in minutes.

Troubleshooting a Framer embed animation

Most embed problems come down to sizing or publishing, not the snippet itself. If the loop does not appear, walk through these common fixes before assuming the code is wrong.

If the snippet still will not render, paste it into a plain HTML file first to confirm it works on its own. When it plays there, the issue is in the Framer setup, usually the Embed element size. That isolation step saves a lot of guessing.

Keeping the loop on brand

A hero loop is brand expression, so it should follow your brand rules. Use your real colors, including an indigo accent if it suits, and your real type for any words. Pull those values from your brand guide so the loop matches every other surface.

When the motion, the palette, and the type all agree, the embed feels like a natural part of the site rather than a bolted-on widget. That consistency is what makes a custom loop read as premium instead of generic.

Frequently asked questions

How do I embed an animation in Framer?

Build a loop in a tool like Zepixo Loops, copy its embed snippet, then add an Embed element in Framer and paste the snippet into the code field. Size the element to fit your hero and publish. The loop renders in preview and on the live site.

Does Framer support custom HTML embeds?

Yes. Framer provides an Embed element for custom code, which is the supported way to add third-party HTML. The Zepixo snippet is self-contained, so it works inside the Embed element without extra setup.

Will the embed animation work on mobile?

Yes, as long as the loop is muted, which the Zepixo snippet handles. Muted, looped motion autoplays on mobile browsers. Test the published page on a phone to confirm the loop plays and the text stays readable.

Is the embedded loop accessible?

The Zepixo snippet includes a prefers-reduced-motion guard, so visitors who ask for less motion see a still frame instead. That keeps the loop friendly for people sensitive to movement, without any extra work in Framer.

Can I update the animation after I embed it?

Yes. Keep the source project in Zepixo Loops, change the color, words, or speed, then re-export. Copy the fresh snippet and paste it over the old one in the Framer Embed element, then republish.

Why use an embed instead of a Framer effect?

Framer effects are great for hover, scroll, and appear animations, but seamless loops like a marquee are easier to build in a loop studio. An embed lets you bring that polished loop into Framer without rebuilding it by hand.

Build the loop once in Zepixo, paste it into Framer, and your hero will feel alive on every visit.