ProjectsAboutExperienceContact

Display Ad Framework

Description

This banner ad framework is a streamlined, code-based solution that simplifies creating interactive display ads. Built with JavaScript, HTML, CSS, and the lightweight Motion One animation library, it provides a structured approach for creating, animating, and deploying banner ads, typically within a compact 300 KB file size.

Goals

Facilitate the rapid creation and customization of banner ads with minimal boilerplate code.
Allow flexible configuration of ad properties, including size, click behavior, and stage object attributes, via a manifest.
Leverage lightweight animation libraries to enhance ad interactivity and user engagement.
Keep the output size small and efficient to meet common ad delivery requirements.

Challenges

Ensuring ad component flexibility while maintaining a lightweight file size.
Simplifying the configuration process to make creating and placing stage objects easy for less technical users.
Coordinating animations across different ad elements to maintain a smooth, cohesive experience.
Building a framework with minimal dependency requirements to keep load times fast.

Resolutions

Defined a manifest.json file that specifies ad size, click tags, and customizable stage object properties, reducing the need for additional configuration.
Implemented Motion One for animations, balancing ease of use with low file size to meet ad file weight limitations.
Organized animation starting positions and interactions within index.js, allowing easy, code-based adjustments to element positions and behaviors.
Optimized file bundling to ensure the entire framework remains around 300 KB, meeting industry standards for ad delivery.
Company

Funimation/Crunchyroll

Tech
HTML
CSS
JavaScript
Node.js
Motion One
Links