Animation Specs

I often make interactive prototype in Hype. And It can be cool if you add a feature to share animation specs with developers such as made https://mitya.com/

What do you think about it? Is there a way to make it in Hype?

In limited cases this wouldn’t be hard to do, but Hype has many expressive features that might not be well represented on a spec sheet, like motion paths and more complicated timing functions that also use bezier curves. So we’d need to think about a lot of these cases.

Is there a common format or other examples? I also couldn’t find where in Mitya’s trial to do this export.

@hellofedorov

I would think for the moment the best way to share would be via a .hype file. This would have the necessary info? This is why we always recommend sharing such a file. I appreciate there are statistics that can be shared in a textual concept but really there are a lot of “variables” that can influence the outcome when working within hype?

I also may have misread the situation. :slight_smile:

This being said, if some of the animation / code is being written outside of hype then this may prove valuable in troubleshooting said scenarios but I would say that this is rare and may not be beneficial to include within Hype (atm) as it’s a rarity.

1 Like

Maybe is there a way to export animations specs as JSON file?

I think learn new app or interface for developer is a bad decision. I think if I can share with him file (JSON or text with description of all change properties) is more convenient for him

If there’s a specific spec format that you think would be good for handoff, please let me know. I’m accumulating data for figuring out what a good feature would look like as this is a popular request. Thanks!

I tested on different projects and such format which Mitya App maked is work fine for developers.

Title — name of Layer and Event
Then list of changing properties (or list of layers which changed properties), where every property has 5 parameters: start animation(delay from zero), duration of animation; how change value of property (from — to), and easings functions.

You can view such screenshots from paper.dropbox which I used for one of my project:


1 Like

Also another projects for specs animations:
https://petervachon.github.io/project-Cue/
https://google.github.io/inspectorspacetime/

1 Like

Awesome, thanks for sending those examples. Project Cue is quite cool from an interactive perspective.