6 Replies Latest reply on Mar 31, 2016 1:20 PM by ClayUUID

    How do i export animations as DOM HTML5, CSS3 and JS... not as Canvas

    Krister Nielsen

      Hello good people,

       

      I'm fairly new to animations but the issue isn't creating the animations us such, but how to export them in the best way. I'm primarily a UI and interaction designer and work a lot in Photoshop and Illustrator.

       

      In our application project which is web based, we wanted to get some nice animations into the menus and perhaps other UI elements but i'm not sure of the best approach for this? We are a very small development team with two programmers and one artist... myself. My job is to create the design for the app as well as how the animations should look and feel in for example Animate CC and then export them. If possible, as pure DOM -- HTML5, CSS3 and JS with full functionality like clicking buttons to animate opening the menus and stuff as you see in a lot of UI prototype GIF-animations so they can easily import it into the project.

       

      Now, after trying some tutorials i realize that the software saves the files as HTML5 alright, but all animated content is inside Canvas elements. We can't have an app full of Canvas elements and I'm no programmer, but i understand that HTML5, CSS3 + JS can do some amazing things. All the animations you create in Animate CC should be able to translate as "pure" HTML/JS right... but how?

       

      Since our team is divided into two major areas, programming (front and back end) plus graphics, how would you guys recommend we go about this since i've been asked to look into all aspects of UX and interaction design, including animations? I have access to the full Creative Cloud and i should also mention that the application will at a later date be developed for smart phones.

       

      Thanks!