Hype: Create HTML5 animation easily
15.3K views
1 min read
Hype is a powerful tool for creating HTML5 layouts and animations. Precise enough for professionals but simple enough for amateurs, the app hits a sweet spot of accessibility and power. With it, you can create web animations and layouts and export them as HTML5 code, meaning they’ll always look good on the web and mobile devices.
Here’s how to get the most out of it.
Creating scenes
The app lets you created individual web-ready animations called scenes. To start, click the “+” button at bottom left to create a new scene, then drag and drop the elements you’d like to use into the document window. The app’s built-in sizing and formatting lines should help with placement. In the Inspector pane at right you’ll find all the tools you need to adjust the elements. Use the “elements” tab to add text, buttons, and other useful extras.
Animating scenes
Once you have your elements in their starting position, click the red “record” button to start animating your scene. Move the timeline to its final position for that movement, then move the elements to their final position. Congratulations! You’ve just animated your first scene. Click the “play” button to see your work.
Previewing your work
Click the “Preview” button in the toolbar to see how your work looks in your preferred browser. This preview mode works exactly like a website, and is a good place to test links and make sure your embedded actions are working.
Exporting your work
When you export, the app produces an HTML file and a resources folder containing all the elements you included in your scenes. To export, click “File,” then click “Export as HTML5.” To embed your scenes on an existing webpage, all you need to do is copy three lines of code from the HTML5 file and upload the resources folder. You can also export as a standard video file
The more you experiment with Hype, the more options you’ll have for creating slick, engaging web content. Get Hype from Setapp and additional useful apps. All apps come pre-loaded with tutorials, so be sure to take advantage of those resources.
