Knowledge base: Guides from the Tumult Team

This index of articles show some of the most popular guides for answering questions about Hype documents, working with video, servers, and more. It is a supplement to the official documentation and video tutorials. This is a great list to be aware of before diving too deeply into your project so you can make the most of what Tumult Hype and the web have to offer.

You may also want to navigate the forums tag #knowledgebase.


Looping / Repeating animations


SVGS: Optimizing and reducing their file size
Masking elements with Groups

Video & Audio

Embed a Youtube, Vimeo, or External MP4 video
Creating Play & Pause Buttons for Video
Run an event when a video has ended
Displaying HLS video
Controlling Audio & Advanced Techniques (Play, Pause, Rewind, Volume control)
Syncing Animations to Video or Audio

Fonts & Typography

Using Typekit & external font libraries like Font Awesome
Adding a Font to your Hype document if you have the original webfont files

Quizzes & Scores

Examples of Quizzes & Incrementing Points
Simple Quiz Example


Intro to Exporting iBooks Widgets


Extend Hype with Hype Extensions
Learn JavaScript: Courses, Tutorials, & Books
Creating a Slideshow with a random image order


Target a class within a Symbol (great for applying a style to symbols programmatically)
What are custom behaviors for?

Exporting & Previewing

Start with the Exporting FAQ for guides on FTP uploading, embedding within your content management system of choice, Kiosks, mobile apps, and more.

Embedding Responsive Documents

This can be tricky, so we've put together detailed guides responsive Wordpress embeds.


Turning on compression & Gzip for your document when hosted on the server
Fixing content-type errors and Mime-type nonsense to ensure your fonts, video & audio work
What does the ?12345 Query string after the JS reference do?

Large documents

Start here: Optimizing Load Times for Large Documents
Linking to scenes from within your document or outside of your document
Creating a Custom Preloader

Diagnose whether your elements are cached by your browser for speed & your returning visitors


Smoothly Scroll to a point
Play a viewport action only once (Learn more about Viewport Actions)


Test on mobile browsers using developer tools
Responsive Design Mode (Great for Testing Responsive Layouts)

Game Development

Detecting Object Collisions using the Hype API
Store JSON data on a server with PHP


Start here, then do a search or explore the top-level forum category.


Jump to a Random Scene
Trigger a random timeline


Display a document in a Kiosk / In-store or Museum Display
Full Screen toggle for Desktop Browsers
Run specific functions only on a specific day
Dropdown menu example
Drag & Drop Example


Thank You Daniel!

1 Like