Swiffy container/JavaScript only works within HTML body of Joomla template

Question

I made a template which uses a svg canvas animation/swiffy container in the header. It all works fine until I put it in a Joomla tremplate.

I had similar problems with JavaScript inside a Joomla template but could resolve these by adjusting the JavaScript. Is there something similar here that I should do?

The JavaScript of the swiffy container apparently needs to be somewhere after the container div of the swiffy svg animation.

Is the problem in the code? Can I fix the code so it works also in the heading with a [$.noConflict();] code or something like that?

The other problems with JavaScript in a Joomla template could be solved by putting the scripts before the [<jdoc:include type="head" />] but in this case it had to be after the swiffy container div.

Here is the JavaScript;

        <script>

      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {  });

      stage.start();
    </script>  

And here is the Joomla template in action with the nonworking swiffy container containing the svg canvas animation Joomla template in action

Answer 1

Sorry the JavaScript can be outside the body element, just as long it is under/after the swiffy/svg code.

So placing the script in the header solved my problem.