Adding Hype Animations to your Blocs Website

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.

Create your Animation

Make three variants of your animation

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 you need to add to Blocs

Only two peices of code

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.

Over to Blocs

Use the HTML Widget to place your animation on the page

Place the HTML widget bric where you want your animation to appear. You will see the words “Click to add code”. Click the words to reveal the Edit Code button on the right side of the screen.

Click the Edit Code button to reveal the Blocs code editor. In the editor window, paste the BODY code that you copied from the Hype HTML File

Next, you need to switch to the page settings for your webpage. These are accessed via the settings icon next to the page name at the top-right of the Blocs interface.

Click the Add Code button to bring up the code editor again. This time, paste the HEAD code you copied from the Hype HTML file

Exporting Your Web Page

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.

Have Fun !!!