Adding animations to Blocs Websites is very easy and can provide an added dimension to otherwise static pages. Follow this simple Guide to see how its done.
When setting up your annimation in Hype, start with a canvas size for your desktop version. Create the animated scene and then add two more layouts - one for iPad and For iPhone. (highlighted in the image on the right) Switch to each layout and adjust the size and positioning of your objects to fit within each layout.
When your animation is complete, export as HTML5. This will create a folder containing a hyperesouces folder and an HTML page. You can open the HTML page in your favourite browser to check that it’s working how you intended,
The code snippets needed to be added to your blocs project are in the HTML page output by Hype. Just open the page in a plain text or code editor application. You will see the two peices of code clearly labeled for you.
Copy each section of code and paste them into the respective places in your Blocs page using the Code Editor. See below.
In order to preview your complete web page with its animation, you will have to export it to a folder on your computer. All you then have to do is copy the hyperesources folder from the Hype Export folder to your Blocs Export Folder as shown below.
You can now preview your project to see how it looks before uploading to your server.