Exporting from Principle App; an interactive animation without the need for the Principle App?

Question

I came across a very adorable interactive character animation made in Principle app. I realise it might not be the best platform to do something like this in, but since I own Principle and no other animating software I'd like to do it here anyway.

When I'm done, I'd like to show this to the world, preferably with interactive features like the demo. I'd like to upload this somewhere and still keep the interactive features, kind of like 'good old' flash did.

How would I best go about this? Is HTML/CSS the way to go? jQuery? Are there other options?

Answer 1

It appears as though Principle will allow you to save a video file or gif if you record an animation (Of course you lose the interactivity)....

Just hit the record button, in the upper right corner...

Then when you click it again (after interacting a bit with the image), you are presented with save options...

(I'm assuming you know the above since you linked to a gif animation)

It would appear if you want the interactivity, you're going to have to rebuild from scratch using html, css, svg, canvas, etc. I see no method to export anything in web-ready formats other than .gif. In addition, there appears to be no underlying structure which may be in a usable "starting point" state.

Principle's own docs state that in all instances (other than gif or movie) viewing requires the Principal Viewer application. And the documentation also states that a user will be presented with a "view in Principle" warning when trying to view anything. There are zero documentation notes regarding exporting or saving to anything other than gif, movie file, or Principle viewer file. I even saved as a Mac app and viewed the internal package contents along with viewing the code structure of the .prd file ... I don't believe the app us set up to render standard cross-browser web pages or markup in any way.