Despite being discontinued, Edge Animate remains one of the most feature-rich HTML5 animation tools out there. That’s not to say that it doesn’t have bugs or desirable features. Making Edge Animate responsive banners out-of-the-box would have been great, but in reality it requires a little extra effort.

Edge Animate allows HTML5 banners to be dynamically scaled to the container size, automatically. However, this is not always what is meant by being responsive. For true Edge Animate responsive HTML5 animation, the below solution allows for different animations to be created for different screen sizes (say, phone, tablet and desktop etc.), and then shows the correct animation depending on screen size. This way, we can make the most of the available screen space, for example by showing more details or graphics on larger screens, and shorter, more concise content for a limited mobile screen.

  1. Figure out how many screen sizes you want to support
  2. Create animations for different screen sizes, and convert it to a symbol. Name the symbol after the lower end of the screen size range (e.g. ‘1200’ for the animation that will display on screen widths 1200px and above, ‘750’ the animation that will display on screen widths from 750px – 1199px etc.)
  3. The height and width of the stage should both be set to 100%, even inside the symbols
  4. Add a 100% height and width rectangle below all the symbols on the main stage, and give it the background colour of your website.
  5. Add the below script to your main stage on the creationComplete action (select the main stage -> click the curly braces icon next to the composition title on the Properties panel -> click on the plus icon on the top right -> select creationComplete)