The animation above is an HTML5 canvas element created in Adobe FlashCC 2015 (soon to be renamed “Adobe Animate“). The published output from FlashCC is uploaded into it’s own directory on our server: http://www.rocketclowns.com/canvas/aquarium/

The element is embedded using an <ifame> tag, which loads and displays content from another URL in your webpage:

<div class="canvas-container">
    <iframe src="http://www.rocketclowns.com/canvas/aquarium/"></iframe>
</div>

As you can see, no width or height is specified. In FlashCC, we created the animation in 21:9 Cinemascope aspect ratio at 1680 x 720 pixels.

Because we need the size of the iframe to be responsive (scaling with the size of the browser window), while keeping the original aspect ratio, we wrapped the iframe in a <div> with the classname “canvas-container”, and we control the size of the wrapping <div> and the <iframe> using CSS:

.canvas-container {
    position: relative;
    padding-bottom: 43%; // (720 ÷ 1680 = 0.4286 = 43%)
    height: 0;
    overflow: hidden;
}

.canvas-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Another thing that may be interesting to note, is that the version of TweenMax.js we’re using in our animation conflicted with a TweenMax version that is loaded by our WordPress theme. The double loading caused ‘TweenMax is not defined’-errors in our console.

Our solution for this is to segregate our own version by defining a window.GreenSockGlobals object where everything will be attached. By default, things get added at the window/global level, but when TweenMax loads, it looks to see if you have defined a GreenSockGlobals object and if it finds one, it’ll attach everything there instead:

<script>
    var rc = window.GreenSockGlobals = {};
</script>
<script src="js/TweenMax.min.js"></script>

From there, we reference our TweenMax instance like this:

rc.TweenMax.to(...);

…et voila: no more conflicts, only fish 🙂