Motion for Web & Social Ads

Delivering Engagement Within Technical Constraints
The primary challenge in digital advertising is creating motion that captures attention without exceeding the strict file size limitations of platforms like HTML5 banner ads. While working at 3 Apples High, I was tasked with developing dynamic, engaging ad campaigns for multiple clients, including DGC Ontario, Weiser, and Coca-Cola, that were not only creatively compelling but also technically optimized for fast load times and seamless performance across all web and social media platforms.

Strategic Motion Design for Maximum Impact
The solution was to employ a “less is more” animation strategy, focusing on clean kinetic typography, elegant product reveals, and smooth, purposeful transitions. By simplifying the motion to its most essential elements, we could direct the viewer’s attention to the core message, whether it was DGC Ontario’s call to action or Weiser’s security features, while ensuring the final animation remained lightweight and performant. This approach allowed for a consistent and high-quality visual language across various ad formats, from standard web banners to vertical social media stories.

Technical Workflow: From After Effects to Optimized HTML5
The entire workflow was built for efficiency and optimization. All animations were created in Adobe After Effects and then exported as lightweight JSON files using the Bodymovin plugin. This process was critical for:

• File Size Optimization: Generating code-based animations that are a fraction of the size of traditional video or GIF files, ensuring fast load times.

• Scalability & Quality: Creating vector-based assets that remain sharp and crisp at any resolution, maintaining brand integrity.

• Creative Control: Retaining complex animation curves and easing from After Effects in the final HTML5 output, ensuring a polished, high-quality look and feel.