Framer to WordPress: Migrate Your Framer Site Without Losing the Animations

Framer is great for animations and no-code design. But clients want WordPress: for plugins, an existing install, or a CMS their team already knows. You don't have to rebuild the whole site. Here's how to migrate from Framer to WordPress without starting from scratch.

Why Framer sites end up needing WordPress

Framer is a design tool first. It does CMS, but not like WordPress does CMS. Here are the four situations that push teams toward WordPress.

Limited CMS. Framer CMS handles simple content well. But if you need WooCommerce, ACF custom fields, WPML, or Gravity Forms, Framer can't match WordPress's plugin ecosystem.
Existing WordPress installs. Many clients already run WordPress for their blog or shop. They won't migrate their whole setup to Framer. They want the Framer design on top of WordPress.
Handoff to non-designers. Framer's editor is not intuitive for content editors who aren't designers. WordPress with Gutenberg or a page builder is much easier to hand off.
Subscription vs. hosting cost. Framer's Pro plan runs $20-$50 per month per site. WordPress hosting at a good provider costs less once you're past the basics, and you own it.

What Framer gives you (and what it doesn't export)

Framer publishes your site to a framer.app subdomain or a custom domain. Under the hood, it generates proprietary React code with Framer Motion for animations.

There's no "export to HTML" button. Framer removed that feature in 2023. The live URL is your only clean output. The source code is Framer's proprietary format, not standard HTML you can drop into WordPress.

This is the same challenge you hit with other no-code tools. If you've looked at the AI design to WordPress gap, the pattern is familiar: polished output, no clean export path.

Framer's animations in WordPress

This is where Framer migrations get interesting. Framer Motion animations compile to CSS keyframes at runtime. By the time a page fully loads in the browser, those animations exist as CSS @keyframes rules injected into <style> tags in the document head.

When you capture a fully rendered Framer page, those keyframes are in the HTML. They travel with the page. They don't need React. They don't need Framer Motion. They're just CSS.

Your WordPress site plays those animations exactly as Framer published them. No React. No Framer Motion installed.

What does break: Framer interactions that use JavaScript state. Variant toggles, multi-step hover states with JS logic, and interactive components backed by Framer's runtime won't work. Those need to be rebuilt. But pure animation? It transfers.

The 3 approaches

Manual rebuild in a WordPress page builder

Open Elementor, Bricks, or Oxygen on a fresh WordPress install. Recreate your Framer design section by section using the visual builder.

Time: 20-40 hours for a typical site. Fidelity varies. Page builders generate different CSS than Framer. Getting animations to match takes extra work with CSS or a library like GSAP. You're rebuilding, not migrating.

Browser devtools workaround

Open Chrome DevTools on your published Framer page. Use "Save as" to grab the rendered HTML, then copy the stylesheets and scripts manually. Reassemble into WordPress templates.

This works in theory. In practice it's messy. Relative paths break. Framer's asset URLs are dynamic. You end up spending hours chasing broken references. It's fragile and not repeatable when your design changes.

URL capture via StaticToWP

Paste your live Framer URL into StaticToWP. The tool renders your page in a real browser, captures the fully computed HTML and CSS including all Framer Motion keyframes, and packages it as a WordPress theme zip.

Time: under 60 seconds. No manual file hunting. No broken paths. The CSS animations are captured in their final state and work in WordPress without any JavaScript dependencies.

This is the same approach that handles Webflow to WordPress migration and tools like v0, Lovable and Bolt to WordPress. The live URL is the source of truth, not the export.

Step-by-step: Framer to WordPress

Publish your Framer site. It needs to be live and publicly accessible. Either your framer.app subdomain or a custom domain works.
Paste the URL into StaticToWP. Go to StaticToWP and enter your Framer site URL.
Download the theme zip. The tool renders your page, captures all assets, and gives you a wp-theme.zip in about 60 seconds.
Install and activate in WordPress. Go to Appearance → Themes → Add New → Upload Theme, upload the zip, and activate it.
Set your static front page. Go to Settings → Reading, set "Your homepage displays" to "A static page", and pick a page as your homepage.
Check the result. Visit your WordPress site. Your Framer design should render with all typography, layout, and CSS animations intact.

What you keep vs. what needs work

What transfers cleanly

CSS animations. All Framer Motion keyframes compile to standard CSS. They play in WordPress exactly as designed.
Typography. Font sizes, weights, line heights, and letter spacing all carry over via captured CSS.
Layout. Framer's grid and flexbox layouts are standard CSS. They transfer without changes.
Fonts. Google Fonts load via URL. Custom fonts uploaded to Framer get bundled into the theme's assets folder.
Responsive breakpoints. Framer generates media queries. They're captured verbatim and work in WordPress.
Navigation menus. Basic nav is re-enabled by the theme's interactivity script.

What needs work after migration

Framer CMS content. Your Framer CMS items (blog posts, portfolio entries) don't auto-migrate. Export them as CSV from Framer and import to WordPress via WP All Import or a similar plugin. Set up custom post types to match your data structure.
Framer forms. Framer's native forms stop working without Framer's backend. Replace them with WPForms, Gravity Forms, or CF7. The visual styling carries over; just point the form to a WordPress plugin handler.
Framer Logic automations. If you used Framer Logic for backend automations, you need to replicate that in WordPress. Options include WPForms + Zapier, custom PHP, or REST API integrations.
JS-driven interactions. Variant toggles and multi-step interaction states that rely on Framer's JavaScript runtime won't work. Budget time to rebuild those with vanilla JS or a library.

SEO when migrating from Framer

Framer handles SEO reasonably well out of the box. When you move to WordPress, you need to carry that work over.

Match your URL structure. If your Framer site used /about and /blog/post-name, keep those exact paths in WordPress. Set your permalink structure to "Post name" under Settings → Permalinks.
Set up 301 redirects. For any URLs that do change, add 301 redirects with the Redirection plugin. Even small path differences cost you link equity.
Re-enter meta tags. Install Yoast SEO or Rank Math and re-enter your meta titles and descriptions. Don't rely on the static title tags in the captured HTML.
Submit a new sitemap. Go to Google Search Console and submit your WordPress XML sitemap. Remove the old Framer sitemap from GSC so Google indexes the right version.
Check canonical tags. Make sure rel="canonical" points to your WordPress URLs. Your SEO plugin handles this automatically once it's set up.

FAQ

Does this work with Framer's free plan?

Yes. As long as your Framer site is published and publicly accessible, the URL capture works. It doesn't matter which Framer plan you're on. The tool just needs to load your live page in a browser.

What about Framer CMS blog posts?

CMS content migration is a separate step from design migration. Export your Framer CMS items as CSV from the Framer dashboard. Then import them to WordPress using WP All Import or a similar tool. Map Framer's field names to WordPress post fields or ACF custom fields. The theme gives you the design; you bring the content.

Will my scroll animations still trigger correctly?

Yes. Framer Motion scroll animations use IntersectionObserver under the hood. When Framer renders the page, those animations get compiled to CSS keyframes with animation-play-state toggled by a small JavaScript snippet. StaticToWP captures that script along with the CSS. Your animations trigger on scroll in WordPress just as they did in Framer.

Can I keep updating Framer and re-converting?

Yes. The WordPress theme is a snapshot of your Framer site at the time of conversion. When you update your Framer design, just run the conversion again and reinstall the new theme zip. It takes about 60 seconds each time. Some teams keep Framer as their design source of truth and re-convert on every major update.