Why motion breaks in manual ports
Motion rarely lives in the HTML. It lives in scroll-linked motion and layout effects rendered at runtime, plus the scripts and stylesheets that drive it. Hand-copying markup takes the skeleton and leaves the nervous system behind.
Capturing the running page instead of the source
Themify reads the page after the browser has executed everything, so animation libraries, keyframes, transition classes and observer-driven effects are all part of the capture.
- CSS keyframes and transitions
- Scroll-triggered reveals
- Hover and focus states
- Sticky and parallax behaviour
- Entrance sequences on load
How to run the capture
Let the page settle first: scroll through it once so lazy sections mount, then capture.
- Open the page you want to convert in Chrome.
- Click the Themify extension icon in the toolbar.
- Press Generate theme and wait for the capture to finish.
- In wp-admin, go to Appearance → Themes → Add New → Upload Theme.
- Upload the .zip, activate it, and the page is live on WordPress.
Accessibility and reduced motion
If the original honours prefers-reduced-motion, that rule travels with the stylesheet. If it does not, add it after conversion — it is a small edit in the theme's CSS and it materially improves the experience.
Frequently asked questions
- Do Framer animations survive the move to WordPress?
- Yes. Because the capture happens at runtime, scroll-linked motion and layout effects rendered at runtime is included alongside the markup.
- What about JavaScript-driven effects?
- Scripts referenced by the page are bundled and re-referenced from the theme, so runtime effects keep working.
- Will animations slow the WordPress site down?
- The theme carries the same weight the original page had. Where performance matters, trim unused libraries after conversion.