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

In memory of Roberto Perez

Roberto's Garden

Music & video by Olaf Wempe

0L4F - The First Time I Saw Your Moment

Couture Multiples

Atelier Maria Lux

Antilounge 22 - Beats and Drones

Mastering for Vinyl and Streaming

See more work by rocketclowns

Rocketclowns NEWS

Record your podcast anywhere

Rocketclowns Mobile Podcast Studio

Interactive animation

Embedding HTML5 Canvas into WordPress

Javascript with ears

Javascript music visualizer

Quality Culture

Interactive animation using babylon.js

more news
sunmooncrossmenu