Manipulating Hype Animation with external JS

Using JavaScript with Hype
1

Im wondering is there a way to manipulate a hype animation from JS added to a web page, not a hype project.

Im trying to do things like pause the Hype animation when not on screen, synchronise the animation playback with mouse scroll events.

EDIT

I can get access using this, is this still the best way?

var hypeDocument = HYPE.documents['Doc name']

2

Yup that’s the ticket. That will target the specific document on that page, so you can do anything in the API. You should make sure that the document or scene has loaded and is ready to receive events: https://tumult.com/hype/documentation/#invoking-api-from-outside-oftumult-hype

1 Like
3

Awesome, I rolled my own today. But I’ll take a look to see if these have any improvements I can make, to my own scripts.

4

If you are putting this in an iframe context and know there will only be a single animation, then I’d probably recommend just using the HypeDocumentLoad listener in the first link @Daniel sent, since this will send a hypeDocument object. This way you don’t need to worry about the export name at all. (And you can’t call the document until the HypeDocumentLoad event anyways!)

<script>

  function myCallback(hypeDocument, element, event) {
    // store as some global you know about and can access later
    window.myHypeDocument = hypeDocument;
  }

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

 </script>

I suppose alternatively there will only be the one entry in HYPE.documents.

1 Like
5

Started a “Cookbook” found here (yesterday)… still in development

4 Likes