Animating elements in an existing HTML page

Animating elements in an existing HTML page
Paul Trani

You can animate and add interactivity to elements in existing HTML pages. Because the animation code generated by Edge Animate is stored in a separate file, the integrity of the HTML page is preserved.

  1. Open an existing HTML page in Edge (File > Open).

    Edge Animate only opens standards-compliant code. For example, if you have duplicate IDs, the tool notifies you that the document has duplicate IDs and does not open the file. If you receive errors or see odd behaviour, try running the HTML page through an HTML validator.

  2. Select a page element on the Stage.

    You can also select a page element in the Elements panel, which displays the page's DOM (Document Object Model).

    DOM in Elements panel
  3. Animate the element. See Create animations.

    Note:

    There are limitations to what you can do with HTML elements. HTML elements can't be converted to symbols and do not have all the properties of other elements. If you receive errors or see odd behaviour, try running the HTML page through an HTML validator.

You can also add elements like divs, text, and import images in Edge, and then animate and add interactivity to those elements.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy