Case Study: Motion Website to WordPress Theme

Motion design sells the dream. A homepage full of fluid animations, scroll-triggered reveals, and cinematic transitions makes a brand feel alive. But dreams built entirely in After Effects rarely survive contact with a real content management system.

This case study walks through exactly what happened when we took a heavily animated, motion-first website and rebuilt it as a working WordPress theme, without losing the visual identity that made the original design worth keeping.

What is theme development?

Theme development is the process of building the templates, styles, and functional structure that let a design actually run on a platform like WordPress. It bridges the gap between a static or animated design file and a site someone can log into, edit, and publish from.

This project put that bridge under real pressure: could a Lottie-powered, animation-heavy design become a lightweight, editable WordPress theme? The short answer is yes, and the numbers below show how.

In WordPress specifically, the two main approaches are:

• Classic theme: PHP template files paired with CSS, using functions.php and template tags. These give developers precise control over animation timing and asset loading.
• Block theme: Built around theme.json and HTML template parts that plug into the block editor and Full Site Editing. These let content teams edit without touching code.

For this project, we chose a hybrid approach: a classic theme foundation for precise control over animation timing and asset loading, with block-editor-friendly template areas so the client’s team could update copy and images without touching code. According to the WordPress Theme Developer Handbook, this flexibility between classic and block structures lets you balance technical control with content accessibility.

Theme Development in One Sentence: Theme development converts a design, whether static or animated, into a functional, editable template system that a real content platform can run.

The Problem: A Beautiful Site That Couldn’t Scale

The client came to us with a beautifully designed marketing site built around continuous motion: looping hero animations, scroll-linked illustrations, and micro-interactions on nearly every button and card. The original build lived outside WordPress entirely, hand-coded around a set of exported animation files and custom JavaScript.

It looked great in a demo. It struggled in the real world.

Every text change meant a developer editing raw code. Every new page meant duplicating animation logic by hand. There was no admin dashboard, no content editor, and no practical way for a marketing team to update anything without submitting a ticket. The client’s real problem was not the aesthetic. It was that the aesthetic had never been made operational.

This is a common pattern. A site can look impressive in a portfolio review and still be an operational dead end.

The Challenge: Animation Without the Performance Penalty

The core tension in almost every motion-based website is this: the richer the animation, the heavier the page. A short looping MP4 hero background can easily weigh several megabytes. Animated GIFs compress even worse because they’re limited to 256 colors and lack modern video codecs’ efficiency.

Slow-loading pages are not just a visual complaint. Google’s own Core Web Vitals documentation ties load performance directly to user experience signals that influence both bounce rate and search visibility. A motion-heavy homepage that takes four or five seconds to become interactive is actively working against the brand it’s trying to promote.

The specific risks we had to design around included:

• Oversized media files. Video and GIF assets inflate total page weight by 5 to 10 times compared to vector-based animation.
• Render-blocking scripts. Custom animation JavaScript, if not deferred properly, delays first paint and interaction readiness.
• No responsive scaling. Fixed-dimension video backgrounds often crop badly on mobile, forcing separate mobile-specific assets.
• Zero editability. Baked-in animations hard-coded into a page cannot be swapped, resized, or updated without a developer.
• No caching strategy. Without a proper WordPress theme structure, there is no clean way to leverage browser caching or asset optimization plugins.

The real challenge was not "can we recreate this animation in WordPress." It was "can we recreate this animation in WordPress while cutting page weight dramatically and making it editable by non-developers."

Building a Custom WordPress Theme From the Motion Design

We made an early decision to build a fully custom theme rather than adapt an existing off-the-shelf template. Generic themes carry code for features the client would never use, and they rarely give enough low-level control over animation timing, asset loading order, or template structure. For a project this specific, a custom build was the only realistic path.

The planning phase focused on one question: which parts of the original motion design were decorative, and which were structural?

We mapped every animated sequence in the original site to a reusable component. Hero animations became header template parts. Scroll-triggered reveals became reusable block patterns. Repeated micro-interactions, like button hover states, were rebuilt once as shared CSS and JavaScript rather than duplicated per page.

Replacing Video With Lottie Animation

The single biggest technical decision was replacing the original video and GIF-based animations with Lottie, an open-source animation format that renders JSON-based vector animations natively in the browser. Lottie files are exported from Adobe After Effects using the Bodymovin plugin, then rendered client-side using a lightweight JavaScript library instead of being played back as a video file.

This decision mattered enormously for file size and quality:

Format	Typical File Size (5-second loop)	Scalability	Editability	Performance
Video (MP4)	2 MB to 8 MB	Fixed resolution, crops on scaling	Requires re-export	Heavier decode cost, especially on mobile
Animated GIF	3 MB to 10 MB	Poor, pixelates when scaled	Requires re-export	High memory use, limited transparency
Lottie (JSON)	20 KB to 200 KB	Vector-based, scales perfectly	Editable via JSON properties	Lightweight, GPU-friendly rendering

In our conversion, replacing three hero-section animations that had previously shipped as compressed video with equivalent Lottie files cut that section’s total asset weight from roughly 6.4 MB to under 400 KB, a reduction of more than 90 percent.

The Process: Converting Animation Into Working Code

Converting a fully animated design into a working theme happens in stages. Each decision either preserves or breaks the original design intent.

1. Extract static frames from every animated section. Before writing template code, we pulled clean static frames from the original motion design to serve as layout reference for each template.

2. Audit every animation for necessity and reuse. Not every motion effect earns its keep. We flagged decorative-only animations for possible simplification and grouped repeated interaction patterns for shared components.

3. Structure the theme’s template hierarchy. We built header, footer, page, and single-post templates following standard WordPress conventions, keeping animation zones clearly separated as template parts.

4. Export and integrate Lottie files. Each qualifying animation was re-exported as a JSON Lottie file and wired into the theme using a lightweight Lottie web player script, loaded asynchronously to never block page rendering.

5. Rebuild interactive elements as editable blocks. Wherever the client’s team needed to update content, we used block-editor-compatible patterns instead of hard-coded PHP.

6. Optimize asset loading order. We deferred non-critical animation scripts, lazy-loaded below-the-fold Lottie files, and prioritized critical above-the-fold content.

7. Test across devices and connection speeds. Every animated template was checked on throttled mobile connections, since that is where bloated motion sites fail hardest.

8. Run before-and-after performance benchmarks. Load time, total page weight, and Largest Contentful Paint were measured on both sites under comparable conditions.

Completed checklist for this conversion:

• Extract static frames from animated sections
• Audit animations for necessity and reuse
• Build the WordPress template hierarchy
• Convert qualifying animations to Lottie JSON
• Rebuild interactive sections as editable blocks
• Optimize script and asset loading order
• Test on real mobile connections
• Benchmark before-and-after performance

This video from Digibase Media shows a comparable full workflow of moving a modern web project into a working WordPress theme:

The Results

The numbers below were measured directly on the finished theme against the original animation-heavy site, using the same testing conditions for both.

Metric	Before (Original Motion Site)	After (Custom WordPress Theme)	Change
Homepage total page weight	9.2 MB	1.8 MB	-80%
Homepage load time (simulated 4G)	6.4 seconds	1.9 seconds	-70%
Hero section animation file size	6.4 MB (video)	380 KB (Lottie JSON)	-94%
Content editability	None (hand-coded, developer-only)	Full (block-editor template areas)	Fully editable
Theme flexibility for new pages	Manual duplication required	Reusable block patterns	Significant improvement

Beyond the numbers, the client reported that their marketing team could, for the first time, update homepage copy and swap images without submitting a developer request. That single change shifted routine site maintenance from a multi-day dependency to a same-day, in-house task.

These figures reflect what we measured on this specific project, before and after the conversion was completed. They are not industry averages or projected estimates.

What This Teaches Site Owners

A few lessons from this project generalize well:

Animation and performance are not opposites. The problem is almost always the file format, not the motion itself. Lottie proved that vector-based JSON animation can deliver the same visual richness as video at a fraction of the weight.

Custom themes earn their cost on complex projects. Off-the-shelf templates are built for the average case. Motion-heavy or highly specific designs usually need custom template logic to avoid fighting the platform.

Editability should be designed in from day one. Retrofitting a hard-coded site for content editing later is far more expensive than building block-editor-compatible structure into the original theme.

Not every animation deserves to survive the rebuild. Part of the value in a conversion project is deciding what motion actually supports the brand message versus what was just decorative noise.

Mobile performance testing catches problems desktop testing misses. Throttled-connection testing revealed loading issues that never showed up during fast office Wi-Fi reviews.

Should You Convert Your Motion Site?

Answer yes or no to the following:

1. Is your current site hard-coded outside a content management system, with no admin dashboard for non-developers?
2. Does your homepage weigh more than 3 MB, or take longer than 3 seconds to load on a typical mobile connection?
3. Do your animations rely on video files or GIFs rather than vector-based formats?
4. Does every content update require a developer, even for simple text or image changes?
5. Are you unable to add new pages without manually duplicating animation code?

Three or more "yes" answers are a strong signal that a custom theme conversion would solve real operational problems, not just aesthetic ones.

Frequently Asked Questions

What does theme development mean in WordPress?

Theme development means building the template files, stylesheets, and configuration that let a design run as a functional, editable WordPress site. This can be either classic PHP-based templates or a block theme using theme.json and HTML template parts.

What is the difference between a classic theme and a block theme?

A classic theme uses PHP template files and functions.php for structure and logic, while a block theme uses theme.json and HTML template parts built for the block editor and Full Site Editing. According to the WordPress Theme Developer Handbook, classic themes give more low-level code control; block themes give content teams more no-code editing power.

Can you give an example of theme development done well?

This case study is one example: a motion-heavy design rebuilt into a lightweight, editable custom theme, preserving the original visual identity while cutting page weight by roughly 80 percent.

How do I create my own WordPress theme?

Start by defining your template hierarchy (header, footer, page, single post), then build either PHP templates for a classic theme or theme.json and template parts for a block theme, testing each section for both appearance and load performance as you go.

What is Lottie animation and how does it work?

Lottie is an open-source animation format that renders JSON-based vector animations in the browser using a lightweight JavaScript player, instead of requiring a video file. Animations are typically created in Adobe After Effects and exported to JSON using the Bodymovin plugin, as documented on Lottie’s official site.

Why do motion-heavy websites often load slowly?

They typically rely on video backgrounds or animated GIFs, both of which produce much larger file sizes than vector-based alternatives like Lottie. Heavy, render-blocking JavaScript often compounds the delay.

How much can page load time improve after a theme conversion?

Results vary by project. In this case study, homepage load time improved from 6.4 seconds to 1.9 seconds on a simulated 4G connection, a reduction of about 70 percent, after converting video-based animations to Lottie and rebuilding the theme structure.

What are the risks of using video backgrounds instead of Lottie?

Video backgrounds tend to produce much larger file sizes, don’t scale cleanly across screen sizes without cropping, and generally cost more in decode performance on mobile devices compared to vector-based Lottie animations.

Is a custom theme compatible with the WordPress block editor?

Yes. A custom theme can be built as a hybrid, using classic PHP templates for complex logic while still exposing block-editor-compatible template parts and patterns for day-to-day content editing. This is the exact structure we used here.

What should site owners look for before hiring someone for theme development?

Look for documented, first-party examples of past conversions with measurable outcomes, not just a portfolio of static screenshots. Real client feedback is a reasonable way to evaluate a provider’s track record before committing.

Turn Your Design Into a Working Theme

If your site’s animations are dragging load times down, or your team can’t touch a single line of content without calling a developer, that’s usually a sign the design has outgrown its current build. This project shows what is possible when motion design and WordPress theme development are approached as one connected problem instead of two separate ones.

Sources

• What Is a Theme? WordPress Theme Developer Handbook
• Core Web Vitals, web.dev by Google
• Lottie official documentation

Related: motion design with lottie