0

I just finished doing html5 animation with Animatron and downloaded my material (project html)..Cos my animation goes to responsive site i have to change my code so it works responsive way.

Problem is that i have not worked with Js code before and how to change it.

This is the code Animatron gave me where those width and height are. How i change this to work responsive way :

<script type="text/javascript">
    var width = 1472;
    var height = 485;

    var playerParams = {
        width: width,
        height: height,
        autoPlay: false,
        repeat: false,
        controlsEnabled: true
    };

    var WRAPPER_ID = 'target';
    var wrapper = document.getElementById(WRAPPER_ID);

    document.body.className = 'no-iframe';
    wrapper.className = 'no-iframe';
    wrapper.style.width = width + 'px';
    wrapper.style.height = height + 'px';
    wrapper.style.marginLeft = -Math.floor(width / 2) + 'px';
    wrapper.style.marginTop = -Math.floor(height / 2) + 'px';
    .
    .
    .

// Mika

jdevelop
  • 12,176
  • 10
  • 56
  • 112
Mika
  • 23
  • 1
  • 7

1 Answers1

0

This code from Codepen:

HTML:

<div id="target" style="position: absolute; top: 0; left: 0;"></div>

JS:

var player = anm.Player.forSnapshot(
        'target', /* target tag ID */
        'http://clips.animatron-test.com/77ffa1bd4f69cba221ecd17326bc9d6a.json?a=1', /* snapshot URL */
        anm.importers.create('animatron') /* importer which can parse
           the given scene, in our case it is included in the bundle and
           named 'animatron'; its instance may be re-used */
        );

       var windowResize = function(){
           player._resize(window.innerWidth, window.innerHeight);
       }

       windowResize();
       window.onresize = windowResize;

Codepen link: http://codepen.io/anon/pen/jEPxqj?editors=101

Found from here: http://help.animatron.com/knowledgebase/articles/488411-how-do-i-make-my-animation-responsive

Jayden Lawson
  • 2,154
  • 2
  • 21
  • 24