Why motion breaks in manual ports
Motion rarely lives in the HTML. It lives in the page as Chrome paints it, fonts and all, 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 a Chrome-rendered PDF portfolio animations survive the move to WordPress?
- Yes. Because the capture happens at runtime, the page as Chrome paints it, fonts and all 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.