Tumult Hype Animations Wordpress Plugin

In the plugin section of your self-hosted Wordpress site, you can download our new plugin by searching for Tumult Hype:

If you're curious about the manual (and difficult) method of embedding, visit this post.

Using the Plugin

Prefer a video? Watch this tutorial

First, export your Hype document as a OAM widget without spaces in the file name:

Click the Hype Animations Admin section, Click 'Upload' at the top, then drag your documentname.oam file right onto the modal that appears. This will provide you with a shortcode you can use in posts and pages. Or in your theme by inserting this format:

<?php echo do_shortcode( '[hype_animations_anim="12"]' ); ?>

Responsive Document Tips

If you're using Only Flexible Layouts in Hype and you have your height set to 100%, you will likely hit an issue where the Hype document won't appear at all. This is because the height of the document is 0 pixels, if no height is set. To fix this, you can set a CSS class on a specific Hype element by filling in a CSS class on the input form:

Next, go to your Wordpress theme's CSS, and insert:

.minheight400 { height:400px; }

Another option is to use this script for adjusting the container size based on the layout setup in your Hype document: Creating a Flexible Tumult Hype Document within a DIV with no set 'height'

Planning Responsive Documents This document will help you plan your Hype document responsive settings when embedding your Hype document in a post or page: SizeDetector.zip (278.9 KB)

You could also dynamically set the height of the object based on a ratio of the viewport height. More info on that here.

Security Recommendation

Since this plugin allows uploading files to your Wordpress site, you may want to restrict to only certain users, or enable this option in Wordfence, a popular security tool for locking down Wordpress, to ensure files cannot be executed from the /uploads/ folder.

Including Head HTML & External CSS

By default, nothing that you include in the <head> of your document will be included in your embedded Hype document since that content is not included on the page. If you have JavaScript, CSS, or Font files loaded from the head of your exported Hype HTML, you'll need to embed your Hype document using the 'iframe' method. In the list of your documents, switch from <div> to <iframe>.

If you're using jQuery within your Hype project, you may need to adjust how you reference jQuery selectors themselves. Check out @MarkHunte's guide here.

Dataset Parameters

Do you want to open a specific scene or pass data to your animation? Please see @MaxZieb's excellent extension:

Example: [hypeanimations_anim_dataset id="X" key1="value1" key2="value2"]


  • Do not export from Tumult Hype with spaces or weird characters. Use export names like mydocument or 2017NewAnimation
  • Some Wordpress optimization plugins like JCH Optimize and the 'Autooptimize' plugin will cause issues with embeds. Workaround here.
  • Responsive documents work: Your DIV dimensions will reflect your scaling percentage numbers. But make sure you read the next bullet point:
  • Using a percentage-based height in a responsive document may cause issues. If possible, only set scaling on the width dimension for your document. This post explains some of the issues when working with responsive documents in Wordpress themes.
  • To switch from a <div> embed method to an <iframe> method, select the dropdown menu and click 'update' after choosing a new option:
  • If you're hitting an issue where embedded documents aren't showing up, look at your developer console and see if you hit any Filename.js is not allowed by Access-Control-Allow-Origin errors. To fix this specific issue, you'll need to adjust your Cross Origin Resource Sharing settings. (see this page)
  • jQuery Not working? Read this guide by @MarkHunte.

Translations or Pull Requests:

If you would like to help translate this plugin into additional languages or contribute programming support, please see this page: Language Support: Translations for the Tumult Hype Animations Wordpress Plugin

Bug Reports:

Please include your Wordpress version, any uploads you attempted, steps to reproduce the problem, and screenshots if helpful. Thanks!


The “Views details” link points to the old plugin page.

Are you taking that over? :thinking:

Upload limit could be a problem for some people. The upload_max_filesize setting is only 2mb on my server.

Also, I wasn’t able to catch a screenshot in time, but the progress bar for file uploaded wasn’t aligned properly.

I tried using the plugin.

Nothing displays when using the “div” option…

I get the following error message…

EvalError: Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “default-src ‘self’ ‘unsafe-inline’ data: https://photics.com”.

…and the project doesn’t appear properly when using the iFrame option…

It doesn’t set the height correctly. It stops at 150px.

Console Log from /wp-admin/admin.php?page=hypeanimations_panel

[Log] JQMIGRATE: Migrate is installed, version 1.4.1 (load-scripts.php, line 9)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (sort_both.png, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (sort_asc.png, line 0)

I uninstalled the plugin. It’s not much different than before and it doesn’t really work for me. It would have been nice to have a single file for the project, but it’s not compatible with my security settings (I didn’t know what to put for this https://wordpress.org/plugins/wp-content-security-policy/ module. Even adding ‘unsafe-eval’ didn’t work. It only made the text on the page larger and the project didn’t display.) and it doesn’t simplify the project scaling (responsiveness) issues. (It’s hard to place a project that isn’t a fixed size.)

On our server that number is 200 but sometimes hosts are nice about upping that limit. We just read a property in php.ini.

What are your document / responsive settings on scene 1?

K? Unclear why you posted issues but uninstalled? Get back to me if you want to help test and fix issues with this.


Great thanks, , and here is my test:

Multiste with wordpress 4.8., PHP version 5.6.30-0+deb8u1

and I met the errors blow at backend once hype-wordpress-plugin-master was activated:

prefix . ‘hypeanimations’; ?>get_charset_collate(); $sql = “CREATE TABLE $table_name ( id int(9) NOT NULL AUTO_INCREMENT, nom varchar(150) DEFAULT ‘’ NOT NULL, slug varchar(150) DEFAULT ‘’ NOT NULL, code text NOT NULL, updated INT(11) NOT NULL, container ENUM(‘none’,‘div’,‘iframe’) NOT NULL, containerclass VARCHAR(150) NOT NULL, UNIQUE KEY id (id) ) $charset_collate;”; require_once( ABSPATH . ‘wp-admin/includes/upgrade.php’ ); dbDelta( $sql ); if ($installed_ver==’’) { add_option( ‘hypeanimations_db_version’, $hypeanimations_db_version ); } else { update_option( “hypeanimations_db_version”, $hypeanimations_db_version ); } $update = $wpdb -> query(“UPDATE “.$table_name.” SET container=‘none’”); } $upload_dir = wp_upload_dir(); if (!file_exists($upload_dir[‘basedir’].’/hypeanimations/’)) { mkdir($upload_dir[‘basedir’].’/hypeanimations/’); } if (!file_exists($upload_dir[‘basedir’].’/hypeanimations/tmp/’)) { mkdir($upload_dir[‘basedir’].’/hypeanimations/tmp/’); } } function hypeanimations_install() { global $wpdb; global $hypeanimations_db_version; global $table_name; $charset_collate = $wpdb->get_charset_collate(); $sql = “CREATE TABLE $table_name ( id int(9) NOT NULL AUTO_INCREMENT, nom varchar(150) DEFAULT ‘’ NOT NULL, slug varchar(150) DEFAULT ‘’ NOT NULL, code text NOT NULL, updated INT(11) NOT NULL, container ENUM(‘none’,‘div’,‘iframe’) NOT NULL, containerclass VARCHAR(150) NOT NULL, UNIQUE KEY id (id) ) $charset_collate;”; require_once( ABSPATH . ‘wp-admin/includes/upgrade.php’ ); dbDelta( $sql ); add_option( ‘hypeanimations_db_version’, $hypeanimations_db_version ); } register_activation_hook(FILE,‘hypeanimations_install’); ?>
Parse error: syntax error, unexpected ‘}’ in /var/www/mysite.com/htdocs/wp-content/plugins/hype-wordpress-plugin-master/includes/functions.php on line 16

and please let me know if you need more.


Anyone know how to change the limit in PHP.ini, and also there are a lot plugins support do that, please check here: https://wordpress.org/plugins/php-settings/, 300MB should be prior choice for Wordpress standard.

For now, I can not activate hype-wordpress-plugin-master, but if you have limited the size to 2M, please remove it or allow large size.

If someone take security into consideration, please use the IP-Geo-Block, and it is easy to handle what kind of roles can upload files, here is reference: https://wordpress.org/support/topic/block-anspress-upload-file/


I’ll send you a PM. Not sure what this might be. If anyone else hits this, please add to this issue.

This really depends on your host. Check out your hosts help pages and search for ‘php.ini’. Sometimes you can access it through your server backend, which is sometimes called ‘cpanel’. And sometimes you can edit it by going a few folders up.

If you need test next version, please let me know.




Should we expect next version recently please? thanks.


The current issue with multi site blogs (such as in your case where there are a network of blogs) is an error in the install script, and I’m not sure how to resolve it. I hope to have a solution soon but I plan on submitting this to the plugin repository on Monday.

Hello Daniel,

I asked the author of IP-Geo-block(https://wordpress.org/plugins/ip-geo-block/) to help, and he has improved the plugin and upload to github at https://github.com/tokkonopapa/hype-wordpress-plugin, and you might like to update it too.

After I test, it works well in Wordpress 4.8 Multisite, and it would be great if you like write him with the Credit on Hype Wordpress Plugin introduction to show thanks to him.

Here is the screenshot of backend at our wordpress Multisite:

and frontend screenshot:

and here is the email content between us for your reference:

发件人: Kiyozumi Unoura tokkonopapa@yahoo.com
收件人: Alex Lee alexlii@yahoo.com
发送日期: 2017年10月12日, 星期四, 上午 10:39
主题: Re: Help on Hype animation Plugin to be compatible with wordpress Multisite

Hi Alex,

Can your try this one?

Good luck!

K. Unoura by tokkonopapa

On Tuesday, October 10, 2017, 2:11:01 PM GMT+9, Alex Lee alexlii@yahoo.com wrote:

Hello Tokkonopapa,

I find your email address at tokkonopapa

tokkonopapa has 25 repositories available. Follow their code on GitHub.

Here is a personal issue need help, and I have to say this is not related to IP-Geo-Block, so I can not post there.

Let me explain what I need if you would like help. You might know Hype animation which is created by two guys from Apple, it is really big contribution to the software world, and here is their official site: Introducing Hype Professional

Introducing Hype Professional
Tumult Hype Professional is the most advanced app for creating stunning animated and interactive HTML5 content. …

and I found there is plugin which support to upload Hype animation to wordpress, but it is really out of update, and I post here to ask Hype official to support: Anyone would help on wordpress Plugin?

Anyone would help on wordpress Plugin?
If anyone can help test, please visit:

Daniel takes the plugin for days work, obviously, it is not compatible with wordpress Multisite yet.

I am not sure this is right way to ask for help, but it would be great if you would like do me a favor to let us know how to make plugin work compatible with Wordpress Multisite, since I know IP-Geo-Block works well in Multisite environment.

Here is the message that show the Error message of that plugin: Tumult Hype Animations Wordpress Plugin

Thanks so much.


Thanks this is super helpful! We’re busy at the iBooks Author and Hype Conference this week but I’ll merge this change in soon as part of my other updates required for submitting to the Wordpress plugin repository. I’ll definitely credit Tokkonopapa on these updates.

Thanks :slight_smile:


Hello @Daniel,

It seems there are two ways to embed Hype animation into Wordpress posts: shortcode and DIV codes. I do not know what is the difference between them, and I very care about the speed and performance on Mobile mode, you might like let me know which one is good for Mobile mode speed, thanks.


This plugin represents the Hype animations with the shortcode – and this (by default) loads the Hype animation as a Div. This is the most performant method. You also have have the option to load the Hype document as an iframe – this will have more of a delay and is only recommended if you have content in the <head> area that you want to use. This method also uses the shortcode method. You can select the ‘iframe’ dropdown in the list of your uploads.

If you can reinstall this plugin for another round of testing please go for it – a number of improvements and changes…

Download URL: https://github.com/tumult/hype-wordpress-plugin/archive/master.zip

Hi Daniel,

I am getting this warning message when Page text area, after using the plugin:

[hypeanimations_anim id="
Warning: mysqli_query(): Empty query in /home6/speakonw/public_html/wp-includes/wp-db.php on line 1942

Warning: rename(/home6/speakonw/public_html/wp-content/uploads/hypeanimations/tmp/Assets/index.hyperesources/,/home6/speakonw/public_html/wp-content/uploads/hypeanimations/0/): Directory not empty in /home6/speakonw/public_html/wp-content/plugins/hype-wordpress-plugin-master/includes/adminpanel.php on line 50

The does not show the animation.
I would appreciate any help to solve this.

Thank you

Thanks for the report, looking into it.


Tested just now, it works well in my wordpress 4.8.2 multisite. and here is test animation for your view: http://forum.lovcour.com/lovcourmotion

By the way, would you please show what you did for improvement and changes in Plugin introduction? thanks.


Can you uninstall and reinstall from the latest version?


Thank you Daniel,

I did it, and I got the following message

Insert the following shortcode where you want to display the animation: [hypeanimations_anim id="
Warning: rename(/home6/speakonw/public_html/wp-content/uploads/hypeanimations/tmp/Assets/test_rookie_video.hyperesources,/home6/speakonw/public_html/wp-content/uploads/hypeanimations/tmp/Assets/index.hyperesources): No such file or directory in /home6/speakonw/public_html/wp-content/plugins/hype-wordpress-plugin-master/includes/adminpanel.php on line 23