Hype work with Adobe Animate or After effects / Bodymovin

Tips & Tricks
1

Hello everyone!
I’d like to know if there is a way to use files from Adobe Animate/After effects in Hype?
We used Hype to do H5 (a very popular things in Wechat微信) for a long time. Now we want to use more complex animation effects from Adobe in Hype. But except the Gif format, I’d like to know if there is other format that Hype support or other solutions?

Thank you all ~~!!

2

have alook over here:

2 Likes
3

Wow it’s cool! Thank you very much!! But maybe I met a trouble because of my poor coding knowledge…
I’ve exported the AE to json file by Bodymovin and used an html widget to add some code, but it didn’t work.
I think it must be some mistakes in my code…
bodymovin_test.zip (135.8 KB)

4

Use an on scene load for the javascript and just set the id of an empty rectangle as ‘animation’

bodymovin_test.hype.zip (74.3 KB)

1 Like
5

Thank you very much! I’ve tested it and it worked perfect!:relaxed:

2 Likes
6

Hi Mark, it’s really cool to work with Lottie. I am trying too, the Hype file you posted is works nice in Hype preview. However I found it does’t work after HTML export. I tried to open it in my Chrome & Safari…
Would you help to solve it again?.. thanks~~

bodymovin_test.zip (157.1 KB)

7

When you preview it in Hype, Hype runs it from it’s built in server.

Just exporting and then trying to open in a browser will give you cross domain restriction errors due to the code using XMLHttpRequest

i.e the json file resources you are accessing will be coming from file:// instead of http://

You need to load the exported project onto a server or access the json files from a server.

Apart from that there is nothing to fix.

8

If you’re exporting from Lottie, make sure you update the bodymovin.js JavaScript function so that it matches the version of Lottie you export from.