Format setup
The size selects 300x600.css: stage dimensions, clipping, border and default element styling. It also supplies ad-size metadata and preloader dimensions.
Dynamic banner system
Once the first banner was approved, this system dramatically reduced build time for the remaining sizes.
var adSize = "300x600";One value configures the format.Positioning math
Width ÷ 2 establishes the center. In tall formats, the template centers both text elements, logo, CTA and offer using xPercent: -50.
sflyAd_txt1 · sflyAd_txt2
Background dimensions
The template derives width and height from the size variable and applies them to the background. Campaign artwork and cropping are adapted in CSS.
sflyAd_bkgrd
Logo setup
Format styles define logo size; the tall-format setup handles centering and its inner markup. The same hosted logo file is reused across ads.
sflyAd_logo
Offer placement
Format styles establish the badge’s position and dimensions. The template centers it in tall ads and applies format-specific setup for the leaderboard.
sflyAd_offer
CTA setup
The format supplies placement and size, with centering and inner markup for tall ads. A shared CTA file can be cached across the campaign.
sflyAd_cta
Keep the animation vocabulary.
Consistent object names let me swap artwork and reuse GSAP targets without renaming variables. The same GSAP code base was shared and cached alongside the logo and CTA.
Build once. Adapt the composition.
Changing the size variable handled the repeatable setup. I could move straight into CSS and composition adjustments, dramatically reducing build time after the first banner was approved.