[SOLVED] Unload Hype animation ( vue, react, nuxt, next )

Using JavaScript with Hype
17

UPDATE for anyone facing similar challenges:

We are trying to integrate Hype within a Gatsby website with content stored in MDX files.
Our Hype animation embeds need to be fully responsive and play when scrolling in view.

We ended up using React Interaction Observer to start the timeline when the Hype iFrame enters the viewport. https://github.com/thebuilder/react-intersection-observer
We use React iFrame Resizer to handle the responsiveness of the iframe as well as sending messages from/to the iframe https://github.com/davidjbradshaw/iframe-resizer-react
Our Hype component looks something like this:

import React, { useRef }  from "react"
import IframeResizer from 'iframe-resizer-react'
import { InView } from 'react-intersection-observer'

const HypeIframe = ({ animationName }) => {

  const ref = useRef(null);

  const trigPlay = (data) => {
    ref.current.sendMessage(data)
  };

  return (
  
  <InView as="div" onChange={(inView, entry) => trigPlay('Play Hype')}>
    <IframeResizer
    frameBorder='0'
    forwardRef={ref}
    onMessage={trigPlay}
    className='mt-3 mb-3'
    src={`/hype/${animationName}/index.html`}
    style={{ width: '1px', minWidth: '100%'}}
    />
  </InView>
)};

export default HypeIframe

Then in our Hype document head, we have:

window.iFrameResizer = {
	  onMessage: function(message){ 
	    if (message === "Play Hype") {
	    	hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, true);
	  	}
	  }
	}

function removeStyle() {
  const docTitleNode = document.getElementsByTagName("title")[0];
  const heightStyleTag = docTitleNode.nextElementSibling;
  heightStyleTag.remove();
}

if (window.addEventListener) {
    window.addEventListener('load', removeStyle, false); 
} else if (window.attachEvent) {
    window.attachEvent('onload', removeStyle);
}

As mentioned earlier, we need to support the full responsiveness of Hype documents with multiple layouts and variable dimensions. For this reason, our complete function integrates @h_classen
Creating a Flexible Tumult Hype Document within a DIV with no set ‘height’

    var _layouts = hypeDocument.layoutsForSceneNamed(hypeDocument.currentSceneName());
    var layoutName = hypeDocument.currentLayoutName();

    var res = null;

    for (var i = 0; i < _layouts.length; i++) {
        var Obj = _layouts[i];
            if (Obj.name === layoutName) {
                res = Obj;
            break;
        }
    }

    if (res) {
    resizeHype();
    }
    
    window.iFrameResizer = {
	  onMessage: function(message){ 
	    if (message === "Play Hype") {
	    	hypeDocument.continueTimelineNamed('Main Timeline', hypeDocument.kDirectionForward, true);
	  	}
	  }
	}

    function removeStyle() {
      const docTitleNode = document.getElementsByTagName("title")[0];
      const heightStyleTag = docTitleNode.nextElementSibling;
      heightStyleTag.remove();
    }

    function resizeHype() {
        var ratioScale = res['width'] / res['height'];
        var hypeEl = document.getElementById(hypeDocument.documentId());
        var currentWidth = hypeEl.offsetWidth;
        var newHeight = currentWidth / ratioScale;
        hypeEl.style.height = newHeight + 'px';
        hypeDocument.relayoutIfNecessary();
    }

    if (window.addEventListener) {
        window.addEventListener('load', resizeHype, false); 
        window.addEventListener('load', removeStyle, false); 
        window.addEventListener('resize', resizeHype, false); 
    } else if (window.attachEvent) {
        window.attachEvent('onload', removeStyle);
        window.attachEvent('onload', resizeHype);
        window.attachEvent('onresize', resizeHype);
    }

    resizeHype();

    return false
5 Likes