Wikitude

I am using the solar system demo and I want to add a animated gif that will animate whenever the app is opened. I've been researching and found some code to make it animated but it isnt working. Can someone take a look at my code and tell me where I am going wrong? 

var Solar = {
    planetsInfo: null,

    init: function() {
        var distanceFactor = 580.2;

        /* null means: use relative to user, sun is NORTH to the user */
        var locationSun = new AR.RelativeLocation(null, 25000, 0, 5000);

        /* sizes & distances are far away from real values! used these scalings to be able to show within user range */
        var sizeFactor = 0.5;
        var sizeEarth = 12.8 * 25;

        /* every object in space has a name, location and a circle (drawable) */
        var sunImg = new AR.ImageResource("assets/Shark_01.0001.png");
        var mercuryImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var venusImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var earthImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var marsImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var jupiterImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var saturnImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var uranusImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var neptuneImg = new AR.ImageResource("assets/Shark_01.0040.png");
        var plutoImg = new AR.ImageResource("assets/Shark_01.0060.png");
        var indicatorImg = new AR.ImageResource("assets/indi.png");

        var imageResource = new AR.ImageResource("assets/fishgif.gif");
        var animatedImageDrawable = new AR.AnimatedImageDrawable(imageResource, 5, 40, 50 {
          enabled : false,
          translate : { x: 1 },
          rotate : { z: 190 }
        });
        // start playing the Animation, with keyframes 0-4, each keyframe is shown 10 miliseconds, and the animation is looped 10 times
        animatedImageDrawable.animate([0, 1, 2, 3, 4], 10, 10);

        var sunSize = (((109 * sizeEarth) / sizeEarth) * 0.3) * sizeFactor;
        var mercurySize = (4.9 * sizeEarth / sizeEarth) * sizeFactor;
        var venusSize = (12.0 * sizeEarth / sizeEarth) * sizeFactor;
        var earthSize = (10 * sizeEarth / sizeEarth) * sizeFactor;
        var marsSize = (6.8 * sizeEarth / sizeEarth) * sizeFactor;
        var jupiterSize = (14.4 * sizeEarth / sizeEarth) * sizeFactor;
        var saturnSize = (12.0 * sizeEarth / sizeEarth) * sizeFactor;
        var uranusSize = (5.20 * sizeEarth / sizeEarth) * sizeFactor;
        var neptunSize = (5.0 * sizeEarth / sizeEarth) * sizeFactor;
        var plutoSize = (0.23 * sizeEarth / sizeEarth) * sizeFactor;

        var sun = {
            name: "Megalodon",
            distance: 0,
            location: locationSun,
            imgDrawable: new AR.ImageDrawable(imageResource, sunSize),
            size: sunSize,
            description: "",
            mass: "Up To 60 Feet",
            diameter: "1800;kg"
        };

        var mercury = {
            name: "",
            distance: 5.6 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -5.6 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(mercuryImg, mercurySize),
            size: mercurySize,

        };

        var venus = {
            name: "",
            distance: 11.2 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -11.2 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(venusImg, venusSize),
            size: venusSize,

        };

        var earth = {
            name: "",
            distance: 15 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -15 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(earthImg, earthSize),
            size: earthSize,

        };

        var mars = {
            name: "",
            distance: 25 * distanceFactor,
            location: new AR.RelativeLocation(locationSun, 0, -25 * distanceFactor, 0),
            imgDrawable: new AR.ImageDrawable(marsImg, marsSize),
            size: marsSize,

        };

        var jupiter = {
            name: "",
            distance: 50.2 * distanceFactor * 0.35,
            location: new AR.RelativeLocation(locationSun, 0, -50.2 * distanceFactor * 0.35, 0),
            imgDrawable: new AR.ImageDrawable(jupiterImg, jupiterSize),
            size: jupiterSize,

        };

        var saturn = {
            name: "",
            distance: 70.3 * distanceFactor * 0.2,
            location: new AR.RelativeLocation(locationSun, 0, -70.3 * distanceFactor * 0.2, 0),
            imgDrawable: new AR.ImageDrawable(saturnImg, saturnSize),
            size: saturnSize,

        };

        var uranus = {
            name: "",
            distance: 100 * distanceFactor * 0.1,
            location: new AR.RelativeLocation(locationSun, 0, -100 * distanceFactor * 0.1, 0),
            imgDrawable: new AR.ImageDrawable(uranusImg, uranusSize),
            size: uranusSize,

        };

        var neptun = {
            name: "",
            distance: 120 * distanceFactor * 0.07,
            location: new AR.RelativeLocation(locationSun, 0, -301 * distanceFactor * 0.07, 0),
            imgDrawable: new AR.ImageDrawable(neptuneImg, neptunSize),
            size: neptunSize,

        };

        var pluto = {
            name: "",
            distance: 420 * distanceFactor * 0.063,
            location: new AR.RelativeLocation(locationSun, 0, -394 * distanceFactor * 0.063, 0),
            imgDrawable: new AR.ImageDrawable(plutoImg, plutoSize),
            size: plutoSize,

        };


        /* put sun, planets (and pluto) in an array */
        this.planetsInfo = [sun, mercury, venus, earth, mars, jupiter, saturn, uranus, neptun, pluto];

        /* create helper array to create goeObjects out of given information */
        var planetsGeoObjects = [];
        for (var i = 0; i < this.planetsInfo.length; i++) {

            /* show name of object below*/
            var label = new AR.Label(this.planetsInfo[i].name, 3, {
                offsetY: -this.planetsInfo[i].size / 2,
                verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP,
                opacity: 0.9,
                zOrder: 1,
                style: {
                    textColor: '#FFFFFF',
                    backgroundColor: '#00000005'
                }
            });

            /* drawable in cam of object -> image and label */
            var drawables = [];
            drawables[0] = this.planetsInfo[i].imgDrawable;
            drawables[1] = label;

            /* Create objects in AR*/
            planetsGeoObjects[i] = new AR.GeoObject(this.planetsInfo[i].location, {
                drawables: {
                    cam: drawables
                },
                onClick: this.planetClicked(this.planetsInfo[i])
            });
            if (i > 0) {
                this.animate(this.planetsInfo[i]);
            } else {
                var sunHackAnim = new AR.PropertyAnimation(this.planetsInfo[i].location, 'northing', 10000, 10000, 1000, {
                    type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
                });
                sunHackAnim.start(-1);
            }
        }

        // Add indicator to sun
        var imageDrawable = new AR.ImageDrawable(indicatorImg, 0.1, {
            verticalAnchor: AR.CONST.VERTICAL_ANCHOR.TOP
        });
        planetsGeoObjects[0].drawables.addIndicatorDrawable(imageDrawable);
    },

    animate: function(planet) {
        var relLocation = planet.location;
        var distance = planet.distance;
        var roundingTime = distance * 2 * 2;

        var northSouthAnimation1 = new AR.PropertyAnimation(relLocation, 'northing', distance * 1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });
        var eastWestAnimation1 = new AR.PropertyAnimation(relLocation, 'easting', distance * 0, distance * 1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });

        var northSouthAnimation2 = new AR.PropertyAnimation(relLocation, 'northing', distance * 0, distance * -1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });
        var eastWestAnimation2 = new AR.PropertyAnimation(relLocation, 'easting', distance * 1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });

        var northSouthAnimation3 = new AR.PropertyAnimation(relLocation, 'northing', distance * -1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });
        var eastWestAnimation3 = new AR.PropertyAnimation(relLocation, 'easting', distance * 0, distance * -1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });

        var northSouthAnimation4 = new AR.PropertyAnimation(relLocation, 'northing', distance * 0, distance * 1, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_SINE
        });
        var eastWestAnimation4 = new AR.PropertyAnimation(relLocation, 'easting', distance * -1, distance * 0, roundingTime / 4, {
            type: AR.CONST.EASING_CURVE_TYPE.EASE_IN_SINE
        });

        var q1 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation1, eastWestAnimation1]);
        var q2 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation2, eastWestAnimation2]);
        var q3 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation3, eastWestAnimation3]);
        var q4 = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.PARALLEL, [northSouthAnimation4, eastWestAnimation4]);

        var cicularAnimationGroup = new AR.AnimationGroup(AR.CONST.ANIMATION_GROUP_TYPE.SEQUENTIAL, [q4, q1, q2, q3]);

        cicularAnimationGroup.start(-1);
    },

    planetClicked: function(planet) {
        return function() {
            document.getElementById("info").setAttribute("class", "info");
            document.getElementById("name").innerHTML = planet.name;
            document.getElementById("mass").innerHTML = planet.mass;
            document.getElementById("diameter").innerHTML = planet.diameter;
            document.getElementById("info").setAttribute("class", "infoVisible");
        };
    }
};

Solar.init();