Using Sprite Sheets & Animation in ResponsiveAds

This page shows three reliable ways to deliver lightweight, transparent animations in HTML5 ads built with ResponsiveAds:

• Animated WebP (fastest path for simple loops)

• Sprite sheets in Google Web Designer (GWD) (visual authoring with a built‑in component)

• Sprite sheets from TexturePacker (professional packing + JSON metadata for custom/GSAP workflows)

If your animation has transparency and must fit strict initial‑load limits (e.g., ≤150 KB), sprite sheets or animated WebP are typically the best choices.

---

Picking the right approach

Choose Animated WebP when…

• You have a short, looping animation; one asset is easier to manage.

• You don’t need per‑frame interactivity.

• You’re fine providing a PNG fall‑back for older browsers.

Choose Sprite Sheets (GWD or TexturePacker) when…

• You want transparent overlays with tight file size control (trim + quantize).

• You need deterministic frame stepping, looping, or syncing with other timeline events.

• You may reuse frames across variants or export @2× assets.

---

Prerequisites (for all workflows)

1. Export a PNG sequence with alpha from your motion tool (e.g., After Effects). Use sequential names: walk_0001.png, walk_0002.png, …

2. Trim empty transparency from each frame to reduce file size.

3. Match target ad dimensions, or plan to scale down.

4. Keep the animation concise (≤ 24 fps; short loops) to stay within initial‑load limits.

---

Option A — Animated WebP (Ezgif)

Best for: fastest path to a single animated asset with transparency.

1. Convert your MOV with alpha or upload your PNG sequence to an online converter (e.g., Ezgif → Video to WebP / Animated WebP Maker).

2. Set frame delay and loop count; enable transparency.

3. Optimize: adjust quality/compression; consider reducing dimensions or dropping redundant frames.

4. Export your .webp and add a static PNG/GIF fall‑back for older browsers.

Embed example

<picture>
  <source srcset="animation.webp" type="image/webp" />
  <img src="fallback.png" width="300" height="250" alt="Ad Animation" />
</picture>

Tips

• Aim for ≤150 KB initial load. If over, reduce dimensions, frame count, or quality.

• Test transparency and looping in Chrome, Firefox, Safari, and Edge.

• Verify performance under network throttling (e.g., Fast 3G in DevTools).

---

Option B — Sprite Sheets in Google Web Designer (GWD)

Best for: no‑code/low‑code authoring with a native Sprite Sheet component.

1. Build the sprite sheet from your PNG sequence (any packer or exporter). Keep total sheet size at or below 2048×2048 when possible.

2. In GWD → Components → Sprite Sheet, drag the component to the stage.

3. In Properties:

   • Source: your sprite sheet image (PNG‑32 with alpha).

   • Frame Width / Height: dimensions of a single cell.

   • Number of Frames and Duration (ms).

   • Loops: 0 for infinite.

   • Autoplay if desired.

4. Preview to confirm alignment, then Publish (HTML5/AMPHTML as required).

Optimization checklist

• Use PNG compression (TinyPNG/ImageOptim) while preserving alpha.

• Split long animations into multiple sheets or lower resolution/frame count.

• Keep total initial load under your ad platform’s limit (commonly ≤150 KB).

---

Option C — TexturePacker → Sprite Sheets (Pro Workflow)

Best for: maximal packing efficiency, JSON metadata, custom code/GSAP control.

1. Import PNG sequence into TexturePacker.

2. Recommended settings for web ads:

   • Trim Sprites: remove excess transparency.

   • Allow Rotation: off (simplifies CSS/JS indexing).

   • Max Size: 1024–2048 px (pick the smallest that fits).

   • Padding: 1–2 px to prevent edge bleeding.

   • Texture Format: PNG‑32 (alpha preserved).

   • Scale: 0.5–0.75× if needed to hit size targets.

   • Reduce Colors / PNGQuant / Zopfli for smaller output.

3. Export: animation.png (sheet) + animation.json (metadata). Optionally export a second @2× sheet for retina.

4. Integrate:

A) Quick CSS background‑position animation

<div id="sprite" style="width:120px;height:120px;background:url('animation.png') 0 0 no-repeat;"></div>
<script>
  const frames = 24, frameW = 120; let i = 0;
  setInterval(() => {
    i = (i + 1) % frames;
    document.getElementById('sprite').style.backgroundPosition = `${-i * frameW}px 0`;
  }, 1000 / 12); // 12 fps
</script>

B) GSAP steps‑based animation

<div id="sprite" style="width:120px;height:120px;background:url('animation.png') 0 0 no-repeat;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
  const frames = 24, w = 120;
  gsap.to('#sprite', {
    backgroundPosition: `${-w * frames}px 0`,
    ease: `steps(${frames})`,
    duration: 1,
    repeat: -1
  });
</script>

Pro tips

• Keep frame rate ≤ 24 fps; shorter loops pack smaller.

• Reuse the same sheet across multiple ad sizes/variants where possible.

• For trimmed sprites, read the JSON’s per‑frame offsets when positioning.

---

Option D — SVG Sprite Container + Timeline Trigger

Best for: authoring fades/overlays/impacts on a visual timeline while the sprite playback is controlled by code and starts when the timeline plays.

Overview

• The animated character/object lives inside an SVG element.

• A parent sprite container holds a single <image> that points to a packed sprite sheet (PNG with alpha) hosted in your publish bucket.

• The timeline manages opacity/position effects; a start trigger fires to begin integer frame‑stepping of the sheet. Optional pause/complete triggers stop/reset playback.

Build steps

1. Prepare the sprite sheet using Option B or C and upload it to a public path in your publish bucket.

2. Create the SVG holder sized to one frame. Place the full sheet as an <image> and reveal a single frame with a clipPath. Move the sheet by one frame width each tick.

<svg id="spriteSvg" width="120" height="120" viewBox="0 0 120 120" role="img" aria-label="Sprite animation">
  <defs>
    <clipPath id="frameWindow"><rect width="120" height="120"/></clipPath>
  </defs>
  <g clip-path="url(#frameWindow)">
    <!-- Replace with your publish-bucket URL -->
    <image id="spriteSheet" href="https://cdn.yourdomain.com/ads/sprite.png"
           x="0" y="0" width="2880" height="120"/>
  </g>
</svg>

Example: width="2880" implies 24 frames × 120px (single‑row sheet).

1. Playback controller — listen for timeline events and step the sheet by whole frames.

<script>
  (function(){
    const sheet = document.getElementById('spriteSheet');
    const FRAME_W = 120, FRAMES = 24, FPS = 12;
    let i = 0, timer = null;

    function step(){ i = (i + 1) % FRAMES; sheet.setAttribute('x', String(-i * FRAME_W)); }
    function play(){ if (!timer) timer = setInterval(step, 1000 / FPS); }
    function pause(){ if (timer) { clearInterval(timer); timer = null; } }
    function reset(){ i = 0; sheet.setAttribute('x', '0'); }

    // Timeline integration — dispatch these custom events from your timeline actions
    window.addEventListener('ra:timeline:start', play);
    window.addEventListener('ra:timeline:pause', pause);
    window.addEventListener('ra:timeline:complete', () => { pause(); reset(); });

    // Optional visibility‑based start
    const io = new IntersectionObserver(e=>{ if(e[0].isIntersecting) play(); }, {threshold: 0.5});
    io.observe(document.getElementById('spriteSvg'));
  })();
</script>

1. Timeline triggers

   • At 0 ms: dispatch ra:timeline:start.

   • At a pause point: dispatch ra:timeline:pause.

   • At the end (after fade‑out): dispatch ra:timeline:complete.

   Example code for timeline actions:

   // Start
   window.dispatchEvent(new Event('ra:timeline:start'))
   // Pause
   window.dispatchEvent(new Event('ra:timeline:pause'))
   // Complete
   window.dispatchEvent(new Event('ra:timeline:complete'))

Notes & gotchas

• For multi‑row sheets, compute col = i % cols, row = Math.floor(i / cols) and set both x and y.

• Add 1–2 px padding between frames to prevent edge bleeding; snap to integer positions.

• You can replace setInterval with GSAP animating the <image> x property using ease: steps(FRAMES).

• Keep animation logic isolated; the timeline continues to control fades/motion separately from sprite stepping.

---

Testing & Compliance Checklist

• Initial load: ≤150 KB (GDN typical) — verify bundle + assets.

• Transparency: confirm in all target browsers.

• Network: test under Fast 3G to simulate real ad loads.

• Fallbacks: static backup image for non‑animated/unsupported cases.

• Mobile: check touch performance and layout.

---

Troubleshooting

Sprite offset/misalignment

• Ensure each frame is the same width/height grid if using a simple sheet.

• If using trimmed frames + JSON, apply the per‑frame origin/offset when drawing.

Edge bleeding/ghost lines

• Add 1–2 px padding between cells.

• Snap background positions to whole pixels.

File size too large

• Reduce dimensions, quantize colors, drop redundant frames, lower fps.

• Split long loops into several shorter sheets or use WebP where appropriate.

Stuttery playback

• Use steps(N) easing (GSAP) or integer frame stepping.

• Avoid CSS transitions with fractional positions for frame indices.

---

FAQ

Do I need both WebP and a sprite sheet? No. Pick one per creative. Use WebP for simplicity; sprite sheets for control/reuse.

What about retina? Export @2× sheets and scale CSS/JS positions accordingly, or serve based on DPR.

Will this work in AMPHTML? Yes—with constraints. Prefer GWD export for AMP creatives, and mind inline script limits.

How do I count frames? In TexturePacker/GWD you set the frame count explicitly; with WebP the timing is encoded in the asset.

---

Deliverables to Engineering

• Animated WebP: animation.webp (+ fallback.png), width × height, loop rules, target KB.

• GWD Sprite Sheet: packed PNG sheet, frame dimensions, frame count, duration, loop policy, published bundle.

• TexturePacker Sprite Sheet: PNG + JSON, intended fps, any offsets, example integration (CSS/GSAP).