How It Started

The project aimed to create responsive, dynamic banner ads for a medical research campaign that met strict industry standards. This required collaboration to ensure all design files were ready for development, with proper file types, sizes, and animation specifications.

Development Steps

1. GSAP Animation Techniques

   • Preloaded assets using .set() for efficient rendering.

   • Animated transitions with .fromTo() and .to(), using Power1.in, Power2.out, and Power3.inOut easing for polished effects.

   • Organized animations with labeled frames, synchronizing asset movements and effects to each stage.

   • Controlled precise scaling, opacity, and motion, matching design files’ x and y coordinates.

2. HTML/CSS Implementation

   • Structured HTML with absolute positioning and z-index for layered animations.

   • Carefully managed natural load order to ensure smooth fades and transitions.

3. Workflow Efficiency with Gulp

   • Used custom Gulp commands for compiling Sass to CSS, minifying files, and bundling assets.

   • Automated image compression, adjusting levels to maintain high quality within size limits.

4. Testing & Quality Assurance

   • Tested across browsers and devices to ensure compliance with performance and file size requirements.

Asset Handling

• Animation Prep: Separated assets based on animation notes, ensuring edge-to-edge frames in Figma.

• Naming & Organization: Created consistent naming conventions directly in Figma, improving semantic readability in HTML and CSS.

• Optimization: Compressed assets via Gulp, balancing quality and file size constraints.

Project Process

1. Initial Review
   Verified Figma files for compliance and recommended animation refinements for client approval.

2. Legal and PRC Review
   Conducted multiple PRC reviews to meet pharmaceutical industry regulations.

3. Development & Testing
   Developed banners using GSAP, HTML, CSS, Sass, and JavaScript, rigorously testing for compatibility.

4. Deployment
   Staged and deployed banners after final approvals, ensuring accurate links and tracking compliance.