cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body onload="init();" style="margin:0px;">
	<div class="container">
		<div id="animation_container">
			<canvas id="canvas" width="100%" height="100%"></canvas>
			<div id="dom_overlay_container">
			</div>
		</div>
	</div>

	<a id="createJSlogo" href="https://createjs.com/" target="_blank">
		<img src="https://createjs.com/mediakit/createjs-badge-reverse.png">
	</a>
	
</body>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Mukta+Mahee');

#createJSlogo {
	position: absolute;
	right: 0;
	bottom: 0;
	background: #35455C;
	border-top-left-radius: 20px;
}

.container {
	position: absolute;
	height: 100%;
	width: 100%;
	background: #f1f1f1;
}
#animation_container {
	position: relative;
	margin: auto;
}
#dom_overlay_container {
	position: absolute;
	width: 550px;
	height: 400px;
	top: 0;
}
.bear-animation-title {
	font-family: 'Mukta Mahee', sans-serif;
	text-align: center;
	font-size: 1.6em;
	color: #454545;
}

@media screen and (max-width: 550px) {
	#canvas {
		position: relative;
		transform: scale(0.8) ;
		width: 100% !important;
	}
}
            
          
!
            
              (function (cjs, an) {

var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [];


// symbols:
// helper functions:

function mc_symbol_clone() {
	var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
	clone.gotoAndStop(this.currentFrame);
	clone.paused = this.paused;
	clone.framerate = this.framerate;
	return clone;
}

function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
	var prototype = cjs.extend(symbol, cjs.MovieClip);
	prototype.clone = mc_symbol_clone;
	prototype.nominalBounds = nominalBounds;
	prototype.frameBounds = frameBounds;
	return prototype;
	}


(lib.Tween11 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#DBD3C0").s().p("AjeEGQhdhsAAiaQAAiZBdhtQBchsCCAAQCDAABcBsQBdBtAACZQAACahdBsQhcBtiDAAQiCAAhchtg");

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-31.6,-37.1,63.2,74.2);


(lib.Tween10 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#BCB096").s().p("AhSAtIgFAAQgKAAgHgJQgIgHAAgLQAAgLAIgHQAHgIAKAAIAFAAQAKAAAHAIQAGAFADAHIAAAGQAAALgJAHQgFAGgIADIgCAAIgCAAgABbAFIgFAAQgIgBgHgGQgHgHAAgKQAAgLAHgHQAHgHAIAAIAEAAQAJAAAHAHQAFAFACAIIAAAFQAAAKgHAHQgGAFgGABIgCABIgBAAg");
	this.shape.setTransform(0.2,-0.2);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#DBD3C0").s().p("AiAA/QgTgUAAgaQAAgaATgTQATgTAagBIADAAQAZABATATQATATAAAaQAAAagTAUQgTASgbABQgagBgUgSgAhmgDQgIAIAAALQAAAKAIAIQAHAJAKAAIAFAAIACAAIACAAQAIgDAFgGQAJgIAAgKIAAgGQgDgIgGgFQgHgHgLAAIgEAAQgKAAgHAHgAAyAUQgRgRAAgYQAAgYARgSQARgRAXAAQAYAAARARQARASAAAYQAAAYgRARQgRARgYAAQgXAAgRgRgABJgoQgIAIAAAKQAAALAIAGQAGAHAJAAIAEAAIABAAIADgBQAGgBAFgFQAIgGAAgLIAAgEQgDgIgFgGQgGgHgJAAIgEAAQgJAAgGAHg");

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-14.7,-8.1,29.6,16.3);


(lib.Tween9 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#454545").s("#454545").ss(2,1,1).rr(-40.05,-7.7,80.1,15.4,7.7);
	this.shape.setTransform(0,0,1,0.839);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-41,-7.4,82.1,15);


(lib.Tween8 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#DBD3C0").s().p("AhtK1Ij3AAQhhAAg6g5IALytQBVlmGIA7QDpA4AkE7IgFIGIAAACIgFAuQgfgchFgHQhFgGgbAOQBOA1BrAXIBtAAQBOgIAzAuQAsAjAFA7IABAEQgDA9gkA1QgcAyh2APQgyAJgzgIIgdgHIiTgmQhqgmhjhGIAAByQBiANBgA5IDkCzIjJDZg");
	this.shape.setTransform(-1.8,0);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#C7BB9E").s().p("AicCEQhig5hhgOIAAhxQBjBGBrAmICRAmIAeAGIgeA1ICCBiIg7A8gAEKiwQg0guhOAIIhtAAQhqgXhNg1QAbgPBFAHQBEAGAeAdIAFgvQAmAPARgBIBjgFQA2ABAaAVQAqAaAXA3QARAwgMAnQgBANgfAPQgFg6gsgjg");
	this.shape_1.setTransform(17.9,34.2);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-53.1,-86.9,106.2,173.9);


(lib.Tween7 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#333333").s().rr(-1.75,-3.7,3.5,7.4,1.75);
	this.shape.setTransform(3.7,0,0.741,0.741);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#333333").s().rr(-1.75,-3.7,3.5,7.4,1.75);
	this.shape_1.setTransform(-3.6,0,0.741,0.741);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-4.9,-2.7,9.9,5.5);


(lib.Tween6 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#333333").s().rr(-6.6,-4.6,13.2,9.2,4.6);
	this.shape.setTransform(10.4,-4.8);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#BCB096").s().rr(-16.7,-13.3,33.4,26.6,13.3);
	this.shape_1.setTransform(-0.3,0);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-17,-13.3,34,26.6);


(lib.Tween5 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#454545").s().p("Ag4DfQhcgZgwhUQgwhUAXhcQAYhcBSgvQBRgvBbAZQBcAaAwBUQAxBUgYBbQgYBdhRAvQg1Aeg5AAQgeAAghgJgAhJiDQg1AegPA8QgPA6AfA2IACACIABADQAOAWAUAQQAXATAeAIQA6AQA1geQArgZASgtIAHgTQAOg4gcg0IgBgCIgBgDQgfg1g7gRQgVgFgUAAQgkAAgiATgAAABgIgEgCQgGgEgEgGQgDgGAAgFQgBgEACgEQACgLAJgFQAFgDAHABIAGAAQAKADAFAJQAFAJgDAKIAAABQgCAJgJAFQgGAEgGAAIgHgBgAhXAaQgKgDgGgJIgDgGQgBgHACgEQACgJAHgEIACgCQAGgEAGAAIAHABQAKADAFAJQADAFAAAFQABADgBAFIgDAHQgDAFgFADIgDACQgFACgEAAIgHgCgABJAKQgGgCgFgEIgEgFQgFgIACgJIABgCIAAgCQADgIAFgEIADgCQAJgFAKADQADABADACQAFADADAFIABABIADAHQABAGgCAGQgBAGgDACQgCAEgFACQgGAEgGAAIgHgBgAgNhAQgKgCgGgJQgFgJADgLQADgKAIgFIABAAQAJgFAJADQAJADAFAJQAGAJgDAKQgCAFgCAEQgDADgEADQgFADgHAAIgGgBg");

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#6D6D6F").s().p("AgkCQQgegJgXgSQgUgQgOgXIgBgCIgCgDQgfg1APg7QAPg7A1gfQA1geA6ARQA7AQAfA2IABACIABADQAcA0gOA3IgHATQgSAtgrAZQgjAUglAAQgTAAgUgFgAgGA0QgJAFgCAKQgCAEABAFQAAAFADAFQAEAHAGADIAFACQAKADAIgFQAJgFACgKIAAAAQADgKgFgJQgFgJgKgDIgGgBIgDAAQgEAAgFADgAhfgQIgCACQgHAFgCAIQgCAFABAHIADAGQAGAJAKADQAIACAIgDIADgBQAFgEADgFIADgHQABgEgBgEQAAgFgDgFQgFgJgKgCIgHgBQgGAAgGADgABCghIgDABQgFAFgDAHIAAACIgBACQgCAJAFAHIAEAGQAFAEAGACQALADAIgFQAFgDACgDQADgEABgEQACgHgBgGIgDgHIgBgBQgDgFgFgCQgDgDgDAAIgIgBQgGAAgFADgAgUhsIgBABQgIAFgDAKQgDAKAFAJQAGAJAKADQAKACAIgFQAEgCADgDQACgEACgGQADgKgGgJQgFgJgJgDIgGgBQgGAAgGADg");
	this.shape_1.setTransform(0.1,-0.2);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-22.9,-23.2,45.9,46.5);


(lib.Tween4 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#6D6D6F").s().p("AADCSIgDAAQg9AAgsgqQgsgrAAg9QAAg8AsgqQAsgrA9AAIADAAIADAAQA6ACAqApIAOAPQAeAlAAAyQAAA9gsArQgXAWgbAKQgXAJgbABIgDAAgAg2A5QgDADgCADQgDAFAAAGIABAEQAAAIAHAGQAEAEAHADIAHAAQAKAAAHgHQAHgGABgIIAAgEQAAgGgDgFIgFgGIgGgFQgGgCgFAAQgLAAgHAHgAAxAPIgEAFQgEAFAAAHQAAAKAIAIIAHAFQAEACAHAAQAHAAAGgDIAFgEQAHgIAAgKQAAgKgHgHIAAAAQgIgIgKAAQgLAAgHAIgAhgg0QgHAHgBAKIAAABQAAAKAIAHQAHAHALAAQAKAAAHgHQAIgHAAgKQAAgFgCgEQgCgFgEgEQgHgHgKAAQgLAAgHAHgAARheIgGADQgIAIAAAKIAAADQACAHAFAGIABABIACACQAHAGAJAAIAHgBQAGgCAFgFQAHgHAAgKQAAgFgCgEQgBgFgEgEQgFgEgGgCIgHgBIgBAAQgHABgEADg");
	this.shape.setTransform(-0.2,-0.2);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#454545").s().p("AikChQhEhDAAheQAAheBEhDQBFhCBfAAQBhAABEBCQBEBDAABeQAABehEBDQhEBDhhAAQhfAAhFhDgAhqhoQgtAqABA9QgBA8AtArQArAqA+AAIACAAIADAAQAbgBAYgJQAbgKAWgWQAsgrAAg8QAAgzgeglIgOgPQgqgpg6gCIgDAAIgCAAQg+AAgrArgAgtBhQgHgDgEgEQgHgGAAgIIgBgEQAAgGAEgFQABgDADgDQAHgHALAAQAFAAAGACIAGAFIAGAGQACAFAAAGIAAAEQgBAIgHAGQgHAHgKAAIgHAAgAA2A1IgHgFQgHgIAAgKQAAgHADgFIAEgFQAHgIALAAQALAAAHAIIABAAQAGAHABAKQAAAKgIAIIgFAEQgGADgHAAQgHAAgEgCgAhigTQgIgHABgKIAAgBQAAgKAHgHQAIgHAKAAQAKAAAHAHQAFAEABAFQACAEAAAFQAAAKgIAHQgHAHgKAAQgKAAgIgHgAALg4IgCgCIgBgBQgFgGgBgHIAAgDQgBgKAIgIIAGgDQAEgDAHgBIABAAIAHABQAGACAFAEQAEAEABAFQACAEAAAFQABAKgIAHQgFAFgGACIgHABQgJAAgHgGg");

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-23.3,-22.7,46.6,45.6);


(lib.Tween2 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#529850").s().p("AjwA4QgEhkBOhMQBNhMB0gGQB0gHBiCEIm7EZQgjgwgDhkg");

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-24.1,-20.3,48.3,40.8);


(lib.Tween1 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#529850").s().p("AurDTQgLhGALhMQAKgsAcgwQAog2BbhBQApgfBKghIIMAAIgrBGQgaA0AAAXQAAA8AYAoQAYApBGAQIHnAAQAig+AugyQAvgzBEglQA8gZA2gHQA2gHBHABQA7ACAcAcQAbAbgKAjQgKAjgogGQgwgGhSAIQgzAHguAQQgtAPguA2QgtA2gLAyQgMAhgfAFg");

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-94.5,-21.1,189.1,42.2);


(lib.Symbol2 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#BCBBBC").s().rr(-13.25,-2.9,26.5,5.8,2.9);
	this.shape.setTransform(11.9,8.1,1,1,-30);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.Symbol2, new cjs.Rectangle(0,0,23.8,16.2), null);


(lib.Symbol1 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#529850").s().p("Ah2B2QgdgEgLgXQgMgWANgbQAMgcAdgQICyhnQAdgRAcAEQAcAEAMAXQALAXgMAbQgMAcgdAQIixBnQgXANgYAAIgLgBg");
	this.shape.setTransform(16.5,12);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.Symbol1, new cjs.Rectangle(0,0,32.9,23.9), null);


(lib.shadow = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// Layer_1
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#000000").s().p("Aq/AwQkkgUAAgcQAAgbEkgUQEjgUGcAAQGdAAEjAUQEkAUgBAbQABAckkAUQkjATmdABQmcgBkjgTg");
	this.shape.setTransform(99.6,6.8);

	this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(0,0,199.1,13.5);


(lib.Tween3 = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// top-handle-shaft
	this.shape = new cjs.Shape();
	this.shape.graphics.f("#454545").s().p("AgtCSIAAgLIgFkYIBlAAIAAEjg");
	this.shape.setTransform(78.6,-54.4);

	this.shape_1 = new cjs.Shape();
	this.shape_1.graphics.f("#529850").s().p("Ag+FoIgrnBQgChoAYgyQAYgyAlgbQAjgbAsgCIAbAAIAFgQIAGEaIg8gGIg7gbICCHig");
	this.shape_1.setTransform(64.5,-32.4);

	this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(10));

	// right-wheel
	this.instance = new lib.Tween4("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(68,45.8);

	this.timeline.addTween(cjs.Tween.get(this.instance).to({rotation:371,x:68.1},9).wait(1));

	// Layer_1
	this.instance_1 = new lib.Tween5("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(-68.2,45.8);

	this.timeline.addTween(cjs.Tween.get(this.instance_1).to({rotation:250},9).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-91.2,-69,182.5,138.1);


// stage content:
(lib.bootybear = function(mode,startPosition,loop) {
	this.initialize(mode,startPosition,loop,{});

	// nose-mouth
	this.instance = new lib.Tween6("synched",0);
	this.instance.parent = this;
	this.instance.setTransform(282.3,123);

	this.timeline.addTween(cjs.Tween.get(this.instance).to({y:118.2},3).to({y:126.2},3).to({y:119},3).to({y:123},3).to({y:118.2},3).to({y:126.2},3).to({y:119},3).to({y:123},3).to({y:118.2},3).to({y:126.2},3).to({y:119},3).to({y:123},3).to({y:118.2},3).to({y:126.2},3).to({y:119},3).to({y:123},3).to({y:118.2},3).to({y:126.2},3).to({y:119},3).to({y:123},3).wait(1));

	// eyes
	this.instance_1 = new lib.Tween7("synched",0);
	this.instance_1.parent = this;
	this.instance_1.setTransform(271.9,104);

	this.timeline.addTween(cjs.Tween.get(this.instance_1).to({y:99.2},3).to({y:107.2},3).to({y:100},3).to({y:104},3).to({y:99.2},3).to({y:107.2},3).to({regY:0.1,scaleY:0.64,y:104.9},1).to({regX:0.1,regY:0.2,scaleY:0.23,skewX:180,x:272,y:102.5},1).to({regX:0,regY:0.1,scaleY:0.64,skewX:0,x:271.9,y:99.3},1).to({regY:0,scaleY:1,y:100.2},1).to({y:104},2).to({y:99.2},3).to({y:107.2},3).to({y:100},3).to({y:104},3).to({y:99.2},3).to({y:107.2},3).to({regY:0.1,scaleY:0.64,y:104.9},1).to({regX:0.1,regY:0.2,scaleY:0.23,skewX:180,x:272,y:102.5},1).to({regX:0,regY:0,scaleY:1,skewX:0,x:271.9,y:100.2},1).to({y:104.4},3).to({y:98},3).to({y:106},3).to({y:99.6},3).to({y:104.2},3).wait(1));

	// body
	this.instance_2 = new lib.Tween8("synched",0);
	this.instance_2.parent = this;
	this.instance_2.setTransform(272.4,179.8);

	this.timeline.addTween(cjs.Tween.get(this.instance_2).to({y:175},3).to({y:183},3).to({y:175.8},3).to({y:179.8},3).to({y:175},3).to({y:183},3).to({y:175.8},3).to({y:179.8},3).to({y:175},3).to({y:183},3).to({y:175.8},3).to({y:179.8},3).to({y:175},3).to({y:183},3).to({y:175.8},3).to({y:179.8},3).to({y:175},3).to({y:183},3).to({y:175.8},3).to({y:179.8},3).wait(1));

	// seat
	this.instance_3 = new lib.Tween9("synched",0);
	this.instance_3.parent = this;
	this.instance_3.setTransform(226.2,255.6);

	this.timeline.addTween(cjs.Tween.get(this.instance_3).to({y:250.8},3).to({y:258.8},3).to({y:251.6},3).to({y:255.6},3).to({y:250.8},3).to({y:258.8},3).to({y:251.6},3).to({y:255.6},3).to({y:250.8},3).to({y:258.8},3).to({y:251.6},3).to({y:255.6},3).to({y:250.8},3).to({y:258.8},3).to({y:251.6},3).to({y:255.6},3).to({y:250.8},3).to({y:258.8},3).to({y:251.6},3).to({y:255.6},3).wait(1));

	// ears
	this.instance_4 = new lib.Tween10("synched",0);
	this.instance_4.parent = this;
	this.instance_4.setTransform(244.9,91.2);

	this.timeline.addTween(cjs.Tween.get(this.instance_4).to({y:86.4},3).to({y:94.4},3).to({y:87.2},3).to({y:91.2},3).to({y:86.4},3).to({y:94.4},3).to({y:87.2},3).to({y:91.2},3).to({y:86.4},3).to({y:94.4},3).to({y:87.2},3).to({y:91.2},3).to({y:86.4},3).to({y:94.4},3).to({y:87.2},3).to({y:91.2},3).to({y:86.4},3).to({y:94.4},3).to({y:87.2},3).to({y:91.2},3).wait(1));

	// bum
	this.instance_5 = new lib.Tween11("synched",0);
	this.instance_5.parent = this;
	this.instance_5.setTransform(235.7,211.8);

	this.timeline.addTween(cjs.Tween.get(this.instance_5).to({y:207},3).to({y:215},3).to({y:207.8},3).to({y:211.8},3).to({y:207},3).to({y:215},3).to({y:207.8},3).to({y:211.8},3).to({y:207},3).to({y:215},3).to({y:207.8},3).to({y:211.8},3).to({y:207},3).to({y:215},3).to({y:207.8},3).to({y:211.8},3).to({y:207},3).to({y:215},3).to({y:207.8},3).to({y:211.8},3).wait(1));

	// Layer_14
	this.instance_6 = new lib.Symbol1();
	this.instance_6.parent = this;
	this.instance_6.setTransform(312.3,217.6,1,1,0,0,0,16.4,12);

	this.timeline.addTween(cjs.Tween.get(this.instance_6).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).to({y:210.4},3).to({y:217.6},3).wait(1));

	// handle-bars
	this.instance_7 = new lib.Symbol2();
	this.instance_7.parent = this;
	this.instance_7.setTransform(331.8,206.1,1,1,0,0,0,11.8,8.1);

	this.timeline.addTween(cjs.Tween.get(this.instance_7).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).to({y:198.9},3).to({y:206.1},3).wait(1));

	// Layer_3
	this.instance_8 = new lib.Tween1("synched",0);
	this.instance_8.parent = this;
	this.instance_8.setTransform(266.6,278.1);

	this.timeline.addTween(cjs.Tween.get(this.instance_8).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).to({y:270.9},3).to({y:278.1},3).wait(1));

	// front-wheel-guard
	this.instance_9 = new lib.Tween2("synched",0);
	this.instance_9.parent = this;
	this.instance_9.setTransform(344.8,296.7);

	this.timeline.addTween(cjs.Tween.get(this.instance_9).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).to({y:289.5},3).to({y:296.7},3).wait(1));

	// front-wheel
	this.instance_10 = new lib.Tween3("synched",0);
	this.instance_10.parent = this;
	this.instance_10.setTransform(278.2,257.1);

	this.timeline.addTween(cjs.Tween.get(this.instance_10).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1).to({y:253.1,startPosition:1},0).wait(1).to({y:250.7,startPosition:2},0).wait(1).to({y:249.1,startPosition:3},0).wait(1).to({y:252.3,startPosition:4},0).wait(1).to({y:254.7,startPosition:5},0).wait(1).to({y:257.1,startPosition:0},0).wait(1));

	// shadow
	this.instance_11 = new lib.shadow("synched",0);
	this.instance_11.parent = this;
	this.instance_11.setTransform(275.6,327.1,1,1,0,0,0,99.5,6.8);
	this.instance_11.alpha = 0.09;

	this.timeline.addTween(cjs.Tween.get(this.instance_11).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).to({regX:99.6,scaleX:1.1,x:275.7},3).to({regX:99.5,scaleX:1,x:275.6},3).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(447.1,283.1,203.1,250.7);
// library properties:
lib.properties = {
	id: 'D3FC78DE103EF24EB4FCCEFBB7DE8A48',
	width: 550,
	height: 400,
	fps: 27,
	color: "#FFFFFF",
	opacity: 1.00,
	manifest: [],
	preloads: []
};



// bootstrap callback support:

(lib.Stage = function(canvas) {
	createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();

p.setAutoPlay = function(autoPlay) {
	this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }

p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }

an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
	an.bootstrapListeners=[];
}

an.bootstrapCallback=function(fnCallback) {
	an.bootstrapListeners.push(fnCallback);
	if(an.bootcompsLoaded.length > 0) {
		for(var i=0; i<an.bootcompsLoaded.length; ++i) {
			fnCallback(an.bootcompsLoaded[i]);
		}
	}
};

an.compositions = an.compositions || {};
an.compositions['D3FC78DE103EF24EB4FCCEFBB7DE8A48'] = {
	getStage: function() { return exportRoot.getStage(); },
	getLibrary: function() { return lib; },
	getSpriteSheet: function() { return ss; },
	getImages: function() { return img; }
};

an.compositionLoaded = function(id) {
	an.bootcompsLoaded.push(id);
	for(var j=0; j<an.bootstrapListeners.length; j++) {
		an.bootstrapListeners[j](id);
	}
}

an.getComposition = function(id) {
	return an.compositions[id];
}



})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn;



var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
	canvas = document.getElementById("canvas");
	anim_container = document.getElementById("animation_container");
	dom_overlay_container = document.getElementById("dom_overlay_container");
	var comp=AdobeAn.getComposition("D3FC78DE103EF24EB4FCCEFBB7DE8A48");
	var lib=comp.getLibrary();
	handleComplete({},comp);
}
function handleComplete(evt,comp) {
	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
	var lib=comp.getLibrary();
	var ss=comp.getSpriteSheet();
	exportRoot = new lib.bootybear();
	stage = new lib.Stage(canvas);	
	//Registers the "tick" event listener.
	fnStartAnimation = function() {
		stage.addChild(exportRoot);
		createjs.Ticker.setFPS(lib.properties.fps);
		createjs.Ticker.addEventListener("tick", stage);
	}	    
	//Code to support hidpi screens and responsive scaling.
	function makeResponsive(isResp, respDim, isScale, scaleType) {		
		var lastW, lastH, lastS=1;		
		window.addEventListener('resize', resizeCanvas);		
		resizeCanvas();		
		function resizeCanvas() {			
			var w = lib.properties.width, h = lib.properties.height;			
			var iw = window.innerWidth, ih=window.innerHeight;			
			var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;			
			if(isResp) {                
				if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
					sRatio = lastS;                
				}				
				else if(!isScale) {					
					if(iw<w || ih<h)						
						sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==1) {					
					sRatio = Math.min(xRatio, yRatio);				
				}				
				else if(scaleType==2) {					
					sRatio = Math.max(xRatio, yRatio);				
				}			
			}			
			canvas.width = w*pRatio*sRatio;			
			canvas.height = h*pRatio*sRatio;
			canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';				
			canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
			stage.scaleX = pRatio*sRatio;			
			stage.scaleY = pRatio*sRatio;			
			lastW = iw; lastH = ih; lastS = sRatio;            
			stage.tickOnUpdate = false;            
			stage.update();            
			stage.tickOnUpdate = true;		
		}
	}
	makeResponsive(true,'both',true,1);	
	AdobeAn.compositionLoaded(lib.properties.id);
	fnStartAnimation();
}



            
          
!
999px
Loading ..................

Console