Ad directory

HTML5 Guidelines

Notes on Animation

  • Avoid CPU-intensive animation effects and consider proper use of JavaScript time controls (e.g., setInterval, setTimeout, requestAnimationFrame), animation loops, or DOM element manipulation, then optimize accordingly
  • CSS or JavaScript may be used for animation
  1. Wrap JavaScript and CSS in closures or namespaces to reduce potential conflicts
  2. Contain JavaScript or CSS in a unique namespace or wrap in a closure to make ad code portable and prevent issues with the page code
  3. CSS3 animation uses GPU which minimizes impact to CPU for rendering animations
  • JavaScript animation can be used to move and manipulate DOM elements or by using the Canvas element
  1. Creative should contain code that checks browser support for Canvas element
  2. When Canvas is not supported as needed to play the animation, design the ad to “degrade gracefully”
  3. In general, follow industry-established and widely accepted JavaScript best practices