Interactive animation

Embedding HTML5 Canvas into WordPress


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 🙂

Made by Rocketclowns

Independent fashion design

Marcha Huskes

A side-scrolling universe in parallaxed 2D

VLISCO Silent Empire

Everything should be XX

MEXX Youth campaign

Campaign website for VLISCO

VLISCO Hommage á l'Art

See more work by rocketclowns

Rocketclowns NEWS

Splash from the past

Splash page archive: Januari 2016

Record your podcast anywhere

Rocketclowns Mobile Podcast Studio

No SEO wizardry, just useful content

SEO: top ranking for our 'Mobile Podcast Studio' page

Javascript with ears

Javascript music visualizer

more news
sunmooncrossmenu