Tumult Hype Animations Wordpress Plugin

I filed an item on our feature tracker for this ability! Thanks!

3 Likes

Hello @Daniel,

I found debug errors, and here is details just for your reference.

Firstly, I enable debug by custom: define( 'WP_DEBUG', true ) in the file of wp-config.php, and update plugin and activate it.

1.I found you changed the folder name of plugin: Screenshot by Lightshot, right?
2. I deleted the older plugin at wordpress admin dashboard, and installed it again, once it was activated the older issue at this top is still there: Tumult Hype Animations Wordpress Plugin - #4 by alexlii

since we sometimes optimize the database by some plugin like:WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance – WordPress plugin | WordPress.org , To be frank, I am a little worried about it effect potential database safety :slight_smile:

3.the debug errors message is at backend please check the screenshot:

The plugin generated 360 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.

Please note that

Alex

Hi-

I tried several times and different ways of using the plugin, but am getting blank spaces.

The OAM is clearly uploading, and I can select it from the Hype Animations button on a new post, but I still get the blank space that looks about the size of the document.

I have unchecked the ‘Scale’ box for both dimensions.

I have exported to a folder and installed through WP using FTP, but the same file as an OAM doesn’t work.

I have tried it in a new post, and in a container in a page, but no luck.

Would you please guide me as to what to check next?

Thanks!

Do you see any errors in your browser console? This will tell you if:

  1. the actual generated JS file being referenced is being loaded
  2. there are any Cross Origin errors ( There is an issue where some sites don’t allow displaying Javascript within their own pages if you have CORS settings set to be super strict. )

Did you try switching the embed style to be Iframe as opposed to the default ‘div’ method? This might tell you if something on your Wordpress site is conflicting with the Hype animation when displayed in the same frame.

Seeing the page would be great if you can share it. Feel free to share with us privately at support@tumult.com.

Thanks, Daniel-

I played with several setting in the Hype Document, at this point not sure what I changed, but I can now upload an OAM file that I exported, and insert it with a shortcode in a post. I can now see the widget on my post.

One issue remains, though:

The widget is not sensitive to window width or device width. I have tried under the Document panel in the inspector to change the Mobile Options section to Document Width and Device Width. But when I try maneuvering the window in Safari, the widget does not change in size at all. I am hoping this is a simple fix, and I am just missing something simple.

Under the Scene panel, I have the Width at 100%. I have tried inserting the shortcode within a text box in a normal container within my theme, no luck.

Is there an easy way to set this to be responsive, just in overall width? I don’t need the individual elements to change.

Thank you!

12 posts were split to a new topic: Wordpress Plugin Embed: Troubleshooting Responsive Document

Here’s one example of a Hype document scaling based on its width. By adjusting the group bounds, and setting scaling & flexible properties on the group, it will expand based on the available width of the Hype document:

scaling-width-shrink-fit.hype 3.zip (953.2 KB)

You can achieve different results if you change the boundary of the group so that it only encloses the actual content you want to never be cut off on the top or bottom, instead of the entirety of the scene. For example, try adjusting the group bounds to just fit the two squares – it will ensure they always fit the available space and are never cut off, but you can get the background image to stretch outside of the boundaries of the document.

Hello @Daniel,

The project works well with Firefox, Chrome, and other browser. but I found there a error with IE:

Anyway to resolve it?

Thanks.

Alex

What version of IE?

ie8, ie11, ie12

And I have not test with ie 9 and 10.

I’m not able to reproduce the issue on IE8 or IE11… does this happen at a specific time or on load? Any chance you could provide a translation for the error as well?

Did you make any modifications to the document or do an Advanced Export?

Are you using a specific VM? (If it is from MS, let us know).

Hello @jonathan

please check my site at https://www.lovcour.com

you will find it happens on load.

our server is on VM, with HHVM+Nginx+Redis cache

Frankly, I am not sure where the errors from.

Alex

How did you export the site? I’m guessing you might have used Advanced Export and the Support Internet Explorer 6-9 box is unchecked?

This is a bug, but the workaround is to check that box (especially because you do seem to want to support IE 8-9 at least!)

3 posts were split to a new topic: Large OAM fails uploading via Hype Animations Wordpress Plugin

I am getting warnings after latest update when uploading and replacing Hype OAM through plugin and the embeds don’t load the Hype script files as they don’t find them.

**Warning** : rename(XXX/wp-content/uploads/hypeanimations/tmp/Assets/information_box_max_2.hyperesources,XXX/wp-content/uploads/hypeanimations/tmp/Assets/index.hyperesources): No such file or directory in **XXX/wp-content/plugins/tumult-hype-animations/includes/adminpanel.php** on line **184**

Update: This seams to be an issue with " " (whitespaces) in the OAM file name!

Pull requests welcome! A warning should be sent when this is attempted…

Thanks, I think I did not check the I.E. compatibility:slight_smile:

I am using the hypeanimations shortcode on a couple of my WordPress pages. At what point in the WordPress action hook sequence does the Hype js file load?

I ask because I would like to load a specific js file, via the wp_enqueue_scripts action hook, BEFORE my Hype js file loads.

Cheers,
Quint

The Hype JavaScript will be loaded just as if you had the embedded JS on the page. The page is rendered by the server for each request (or during any caching). So if you had a wp_enqueue_scripts function setup, this would likely place the JS code within the head. So just placing it there should do the trick.

If you’re doing anything that depends on a Hype file being loaded, then you should be waiting for the HypeDocumentLoad event. You could wrap any ‘run this after Hype has loaded’ functions in something like this:

<script>

  function documentHasloaded(hypeDocument, element, event) {
    // Do something here...
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":documentHasloaded});

 </script>
1 Like

Thanks for the quick and comprehensive response, Daniel. “Likely” is correct, that is, if one does not change the default.

1 Like