function el_animation(el, params){
var GS = TimelineMax;
var head_p = 'M132,36c0,0-102,48-118,136L0,378c0,0,76,180,362,200c0,0,204-160,174-366c0,0-25-143-206-212L132,36z';
var jaw_p = 'M75.8,69.6c-5.3-3.2-131,62-47,234c0,0,53.6,83.6,178.1,110.6c0,0,63,19.5,91.5,19.5c0,0,168-138,171-310.5c0,0-1.5-87-48-123c0,0-13.5-4.5-28.5,33c0,0-16.5,28.5-63,9l-97.5,22.5C232.4,64.7,187.8,136.6,75.8,69.6z';
var jawShade_p = 'M0,17.2c0,0,148.7,101.4,293.5-17.2c0,0-51.8,91.6-117.8,102.5C175.7,102.5,71.9,102,0,17.2z';
var brow_l_p = 'M0.2,96.7c-2.3,1.8,21-78,89.2-96.6c0,0,24.2-2.8,34.2,25.9c0,0,16,37.9-11,56.3c-5,0.9-18-9.2-33-14.8C79.6,67.5,58.6,52.1,0.2,96.7z';
var ear_l_p = "M166.5,97.7c0,0-58.5-31.5-117-91.5c0,0-16.5-15-33,1.5c0,0-52.5,133.5,30,210h21l133.5-99L166.5,97.7z";
var ear_r_p = "M0,119.4c0,0,79.4-85.1,107.4-119.1c0,0,19-4,19,20c0,23-10,133-10,133L0,119.4z";
var ear_l_fill_p = "M95.8,117.8c-12.2-22.7-42.5-80.1-53-106.5c-4.8-12-21-15.5-30.4-5.5c-4.6,6-33.6,106.6,16.7,187.3c7.1,11.4,32.5,29.7,40,18.5l49.8-42.9C122.7,163.2,99,123.7,95.8,117.8z";
var ear_l_s_a_p = "M59.5,153.6c0,0-17.5-54.5-59.5-80c0,0,1,66.5,38.5,104L59.5,153.6z";
var ear_l_s_b_p = "M68.6,129.6C68.6,129.6,21,43.5,0,0c0,0,19.1,110.1,49.1,146.1L68.6,129.6z";
var ear_r_fill_p = "M0,128.9L56.4,0.8c0,0,8-5,10,10L51,143.9L0,128.9z";
var brow_r_p = 'M105.1,51c2.2,0.7-53.1-57.7-93.7-50.3c0,0-16.3,5.8-10,32.6c0,0,6.6,36.4,31.5,42.6c3.5-0.9,6.5-6.2,8.2-20.2C41.1,55.7,43.2,31.6,105.1,51z';
var forhead_highlight_p = "M0,0c0,0,7.5,37,15,49c-1.5-2.9,13.5,25.2,27,37c0,0-1-21-10-43C32,43,13.5,6,0,0z";
var nose_p = "M52.9,0c0,0-58.5,75-52.5,136.5c0,0,6,61.5,66,60c0,0,48-34.5,69-42c0,0,25.5,0,39,3c0,0,46.5-21,16.5-85.5C190.9,72,147.4,13.5,52.9,0z";
var eye_l_p = "M0.7,56.1c0,0-9-48,36-56c0,0,34-5,44,58C80.7,58.1,26.7,85.1,0.7,56.1z";
var eye_l_lash_p = "M0,57.1c0,0-1.8-60.4,52.9-57c0,0,45.1,2,41.6,65c0,0-10-47-37-52c0,0-47-8-37,57L0,57.1z";
var eye_r_lash_p = "M67.6,25.6c0,0-13.5-33.3-44.8-24c0,0-31,9-20.7,50L7.8,63c0,0-10.7-41,14.3-50c0,0,28.8-6,40.1,31.3C62.2,44.3,64.6,33.6,67.6,25.6z";
var eye_r_p = "M4.6,51.2c0,0-16-41,12-51c0,0,29-5,43,33c0,0-4,21-34,35C25.6,68.2,10.6,70.2,4.6,51.2z";
var nose_mid_p = "M0,36.9c0,0,42-56,110-30c0,0,11,33-36,64C74,70.9,24,80.9,0,36.9z";
var nose_ridge_p = "M0,0.6l8,45.3l8-45.3c0,0-3.9-1.4-6.9,0S0,0.6,0,0.6z";
var nose_under_p = "M0,52c0,0,29,34.2,57.4,26.6c0,0,60.4-39.6,70.4-42.6l42.1,2.1c0,0,19.9-7.1,25.9-38.1c0,0,6,37-27.4,53.1l-39-3L64.8,91C64.8,91,16,106,0,52z";
var under_eye_l_p = "M0,23c0,0,9,22.7,44,21c0,0,28-2,43-18L78,0L15,3L0,23z";
var under_eye_r_p = "M0,50.7C0,50.7,36.7,42,38.7,0L0,50.7z";
var nose_mid_highlight_p = "M0,20.8c0,0,28-30,69-18C69,2.8,61.5,14.8,0,20.8z";
var mouth_shadow_p = "M1.2,65.9l34.8-40.4L98.2,0l34.9,30c1.8,91.5-67.8,91.5-67.8,91.5C14.1,115.5,0,74.9,0,74.9L1.2,65.9z";
var mouth_p = "M127.5,0c0,0,1.3,18.5-16.2,39.6s-51.1,30.7-86,19C4.5,49.4,0,30.6,0,30.6L127.5,0z";
var tounge_p = "M0,36.5c0,0,6.7,1.8,15,3.5s18.6,0.1,18.6,0.1c34.8-5,50.8-24.6,58-40.1L57.9,2.5L0,36.5z";
var shades_p = "M495.6,0L317.8,41.5c0.2,2.7,0.5,5.3,0.7,7.9l-55.3,12.2c-0.4-4.2-0.9-6.6-0.9-6.6L0,115.9c32.8,122.5,158.7,87.1,158.7,87.1c69.5-21.9,93.8-65.3,101.6-99.4l28.5-28.1c5.4-5.4,13.3-7.4,20.6-5.3c4.6,1.3,9.4,3.2,13.6,5.1c21.4,85.3,91.9,63.1,91.9,63.1C499,110,495.6,0,495.6,0z";
var shades_tail_p = "M77.2,1.2L21.8,29.8c0,0-35.8,32.2-15.6,58.1c0,0,17.1,8.9,14.9-14.1c0,0-6.1-16,12.8-28.1c4-2,53.9-18.4,53.9-18.4s14.6,0.5,11.2-16S77.2,1.2,77.2,1.2z";
var shades_triangle_p = "M5.3,9.7L0,78.7L22,5.3,14.7z";
var shades_l_in_p = "M0,48.9L213.5,0c0,0,18.5,80.2-83.1,111.1C130.4,111.1,28,139.1,0,48.9z";
var shades_r_in_p = "M0,30.5L142,0c0,0,4.3,81.4-63.9,103.5C78,103.5,9.5,122.6,0,30.5z";
//highlights
var h_l_a = "M32.3,0L0,7.4c5.1,16.5,12.8,29,21.8,38.5L32.3,0z";
var h_l_b = "M0,72.8C15.8,84,34,88.5,50.4,89.9L71.3,0L13.6,13.2L0,72.8z";
var h_l_c = "M0,102.2c14.1,3.4,38.9-2.1,55.6-5L77.9,0L20.1,13.2L0,102.2z";
var h_l_d = "M0,95.1c11.2-3.6,17.5-9.6,28.7-20.8L34.6,0L16.3,3.7L0,95.1z";
var h_l_e = "M0,87.5c11.2-3.6,37.3-38.6,37.3-73.3L36,0L17.7,3.7L0,87.5z";
var h_r_a = "M24.2,0L0,5.2c1.9,18.8,6.3,33,12.1,43.6L24.2,0z";
var h_r_b = "M0,64.1c8.9,13.2,20.2,19.7,30.7,22.8L52.3,0L13.8,8.3L0,64.1z";
var h_r_c = "M0,94.7c11.2,5.3,23.8,3,36,0.7L59.9,0L21.4,8.3L0,94.7z";
var h_r_d = "M0,95.8c10.2-2,16.2-10.6,24.4-16.9L40.6,0L20.4,4.1L0,95.8z";
var h_r_e = "M0,79.9c12.9-15.9,16.8-24.1,22.8-41s3.6-39,3.6-39L15.5,2.1L0,79.9z";
var highlight_l = [h_l_a, h_l_b];
var highlight_l2 = [h_l_b, h_l_c];
var highlight_l3 = [h_l_c, h_l_d];
var highlight_l4 = [h_l_d, h_l_e];
var highlight_r = [h_r_a, h_r_b];
var highlight_r2 = [h_r_b, h_r_c];
var highlight_r3 = [h_r_c, h_r_d];
var highlight_r4 = [h_r_d, h_r_e];
MorphSVGPlugin.pathFilter(highlight_l);
MorphSVGPlugin.pathFilter(highlight_l2);
MorphSVGPlugin.pathFilter(highlight_l3);
MorphSVGPlugin.pathFilter(highlight_l4);
MorphSVGPlugin.pathFilter(highlight_r);
MorphSVGPlugin.pathFilter(highlight_r2);
MorphSVGPlugin.pathFilter(highlight_r3);
MorphSVGPlugin.pathFilter(highlight_r4);
var ear_r = el.svg({ width: 126, height: 153, transformOrigin: "90% 98%", x: 310, y: -99, points: ear_r_p, style: { fillStyle: "#da6932" } });
var head = el.svg({ width: 539, height: 578, points: head_p, transformOrigin: "0% 65%", style: { fillStyle: "#ee7432" } });
var jaw = el.svg({ debug: false, width: 325, height: 433, transformOrigin: "90% 98%", x: 55, y: 127, points: jaw_p, parent: head, style: { fillStyle: "#efc185" } });
var jawShade = el.svg({ x: 120, y: 298, points: jawShade_p, parent: jaw, style: { fillStyle: "#d7996f" } });
var ear_l = el.svg({ width: 200, transformOrigin: "70% 78%", height: 217, x: -25, y: -60, points: ear_l_p, parent: head, style: { fillStyle: "#da6932" } });
var ear_l_fill = el.svg({ x: 10, y: 0, points: ear_l_fill_p, parent: ear_l, style: { fillStyle: "#f0924e" } });
var ear_l_s_a = el.svg({ x: 40, y: 40, points: ear_l_s_a_p, parent: ear_l, style: { fillStyle: "#ce5518" } });
var ear_l_s_b = el.svg({ x: 64, y: 40, points: ear_l_s_b_p, parent: ear_l, style: { fillStyle: "#af4817" } });
var ear_r_fill = el.svg({ x: 55, y: 10, points: ear_r_fill_p, parent: ear_r, style: { fillStyle: "#f0924e" } });
var forhead_highlight = el.svg({ x: 280, y: 19, points: forhead_highlight_p, parent: head, style: { fillStyle: "#ce6032" } });
var under_eye_l = el.svg({ x: -12, y: 33, points: under_eye_l_p, style: { fillStyle: "#af4817" } });
var under_eye_r = el.svg({ x: 25, y: 22, points: under_eye_r_p, style: { fillStyle: "#af4817" } });
var eye_l = el.svg({ x: 181, y: 128, points: eye_l_p, parent: head, style: { fillStyle: "#ffffff" } });
var pupil_r = el.circle({ x: 22, y: 42, radius: 31, scaleY: 0.9, parent: eye_l, style: { fillStyle: "#543529" } });
var eye_l_lash = el.svg({ x: -15, y: -5, points: eye_l_lash_p, parent: eye_l, style: { fillStyle: "#543529" } });
var eye_r = el.svg({ x: 367, y: 79, points: eye_r_p, parent: head, style: { fillStyle: "#ffffff" } });
var eye_r_lash = el.svg({ x: -2, y: -3, points: eye_r_lash_p, parent: eye_r, style: { fillStyle: "#543529" } });
var pupil_l = el.circle({ x: 22, y: 42, radius: 25, scaleY: 1.2, scaleX: 0.8, rotation: -10, parent: eye_r, style: { fillStyle: "#543529" } });
var mouth_shadow = el.svg({ x: -12, y: -24, points: mouth_shadow_p, style: { fillStyle: "#d7996f" } });
var mouth = el.svg({ debug: false, width: 142, height: 121, transformOrigin: "50% 10%", x: 320, y: 264, points: mouth_p, parent: head, style: { fillStyle: "#643642" } });
var tongue = el.svg({ x: 30, y: 24, points: tounge_p, parent: mouth, style: { fillStyle: "#a55681" } });
var nose = el.svg({ debug: false, x: 274, y: 116, width: 202, height: 197, transformOrigin: "28% 0%", points: nose_p, parent: head, style: { fillStyle: "#f5d39d" } });
var nose_shadow = el.rect({ x: 90, y: 85, rotation: -10, width: 72, height: 73, parent: nose, style: { fillStyle: "#d68d81" } });
var nose_under = el.svg({ x: 5, y: 108, points: nose_under_p, parent: nose, style: { fillStyle: "#d67d41" } });
var nose_ridge = el.svg({ x: 130, y: 110, points: nose_ridge_p, parent: nose, style: { fillStyle: "#59352b" } });
var nose_mid = el.svg({ x: 65, y: 58, points: nose_mid_p, parent: nose, style: { fillStyle: "#59352b" } });
var nose_mid_highlight = el.svg({ x: 20, y: 14, points: nose_mid_highlight_p, parent: nose_mid, style: { fillStyle: "#bc838b" } });
var brow_l = el.svg({ x: 142, y: 42, points: brow_l_p, parent: head, style: { fillStyle: "#f5d39d" } });
var brow_r = el.svg({ x: 324, y: 18, points: brow_r_p, parent: head, style: { fillStyle: "#f5d39d" } });
mouth_shadow.parent = mouth;
ear_r.parent = head;
under_eye_l.parent = eye_l;
under_eye_r.parent = eye_r;
var shades = el.svg({ x: 65, y: 22, points: shades_p, style: { fillStyle: "#3f2756" } });
var shades_tail = el.svg({ x: -75, y: 113, transformOrigin: "90% 12%", points: shades_tail_p, parent: shades, style: { fillStyle: "#3f2756" } });
var shades_l_in = el.svg({ x: 30, y: 77, points: shades_l_in_p, globalCompositeOperation: 'source-over', parent: shades, style: { fillStyle: "#5d3356" } });
var shades_r_in = el.svg({ x: 340, y: 17, points: shades_r_in_p, parent: shades, style: { fillStyle: "#5d3356" } });
var shades_t_l_in = el.svg({ x: 195, y: 78, points: shades_triangle_p, parent: shades, style: { fillStyle: "#b34c6f" } });
var shades_t_r_in = el.svg({ x: 440, y: 16, points: shades_triangle_p, parent: shades, style: { fillStyle: "#b34c6f" } });
var highlight_l_obj = el.svg({ x: 0, y: 41, points: highlight_l[0], parent: shades_l_in, style: { fillStyle: "#b33f8f" } });
var highlight_r_obj = el.svg({ x: 2, y: 26, points: highlight_r[0], parent: shades_r_in, style: { fillStyle: "#b33f8f" } });
var stageNull = el.rect({ scale:1,x: -el.width * 0.3, y: -el.height * 0.3, null: 1, transformOrigin: "50% 100%" });
var charNull = el.rect({ parent: stageNull, null: true, transformOrigin: "0% 200%" });
var text_style = 120 + "px museo900";
var msg_text_stroke = el.text({ parent: stageNull, text: "DEAL WITH IT", style: { font: text_style, fillStyle: '#b33f8f', lineWidth: 20, strokeStyle: "#ffffff" } });
var msg_text = el.text({ parent: stageNull, x: 250, y: 950, text: "DEAL WITH IT", style: { font: text_style, fillStyle: '#b33f8f' } });
msg_text_stroke.parent = msg_text;
head.parent = charNull;
shades.parent = stageNull;
//SHADES
var highlightLeft = new TimelineMax()
.from(highlight_l_obj, 0.01, { opacity: 0, ease: Sine.easeIn }, 0)
.to(highlight_l_obj, 0.2, { x: 29, y: 25, ease: Sine.easeIn, points: highlight_l[1] }, 0)
.to(highlight_l_obj, 0.2, { x: 78, y: 12, ease: Linear.easeNone, points: highlight_l2[1] }, 0.2)
.to(highlight_l_obj, 0.3, { x: 159, y: 4, ease: Linear.easeNone, points: highlight_l3[1] }, 0.4)
.to(highlight_l_obj, 1, { x: 180, y: 0, ease: Power3.easeOut, points: highlight_l4[1] }, 0.7)
.to([highlight_l_obj], 1, { opacity: 0 }, 0.8);
var highlightRight = new TimelineMax()
.from(highlight_r_obj, 0.1, { opacity: 0, ease: Sine.easeIn }, 0)
.to(highlight_r_obj, 0.2, { x: 18, y: 15, ease: Sine.easeIn, points: highlight_r[1] })
.to(highlight_r_obj, 0.2, { x: 40, y: 8, ease: Linear.easeNone, points: highlight_r2[1] }, 0.2)
.to(highlight_r_obj, 0.3, { x: 90, y: 2, ease: Linear.easeNone, points: highlight_r3[1] }, 0.4)
.to(highlight_r_obj, 1, { x: 115, y: 2, ease: Power3.easeOut, points: highlight_r4[1] }, 0.7)
.to(highlight_r_obj, 1, { opacity: 0 }, 0.8);
var highlight_tl = new TimelineMax()
.set(highlight_l_obj, { x: 0, y: 41, ease: Sine.easeIn, points: highlight_l[0] }, 0)
.set(highlight_r_obj, { x: -3, y: 27, ease: Sine.easeIn, points: highlight_r[0] }, 0)
.add(highlightLeft, 0)
.add(highlightRight, 0.0);
highlight_tl.timeScale(1.5);
var mouthmovy = new TimelineMax({ repeat: 5 })
.to(nose, 0.15, { scaleY: 1.04, ease: Sine.easeOut }, 0)
.to(mouth, 0.15, { scaleY: 1.05, y: "+=2.5", ease: Sine.easeOut }, 0)
.to(nose_mid, 0.15, { y: "+=1", ease: Power4.easeOut }, 0)
.to(mouth_shadow, 0.15, { y: "-=2", ease: Sine.easeOut }, 0)
.to(nose, 0.2, { scaleY: 0.98, ease: Sine.easeOut }, 0.15)
.to(mouth, 0.15, { scaleY: 0.9, y: "-=5", ease: Sine.easeOut }, 0.15)
.to(mouth_shadow, 0.15, { y: "+=4", ease: Sine.easeOut }, 0.15)
.to(nose_mid, 0.2, { y: "-=2", ease: Sine.easeInOut }, 0.15)
.to(nose, 0.15, { scaleY: 1, ease: Power1.easeIn }, 0.35)
.to(mouth, 0.15, { scaleY: 1, y: "+=2.5", ease: Power1.easeIn }, 0.3)
.to(mouth_shadow, 0.15, { y: "-=2", ease: Power1.easeIn }, 0.3)
.to(nose_mid, 0.15, { y: "+=1", ease: Power1.easeIn }, 0.35);
var popup = new TimelineMax()
.from(nose, 1.4, { y: "+=90", ease: Elastic.easeOut.config(0.9, 0.6) }, 0)
.from(mouth, 1.4, { y: "+=90", ease: Elastic.easeOut.config(0.9, 0.6) }, 0)
.from(nose_mid, 1.4, { y: "+=140", ease: Elastic.easeOut.config(0.5, 0.4) }, 0)
.from(nose_shadow, 2, { scaleX: 1.5, scaleY: 0.5, ease: Elastic.easeOut.config(0.9, 0.4) }, 0)
.from([eye_l, eye_r], 1.4, { scaleX: 1.5, scaleY: 0.5, y: "+=20", ease: Elastic.easeOut.config(0.9, 0.4) }, 0)
.from(jawShade, 1.9, { x: "-=40", y: "+=70", scaleX: 1.05, ease: Elastic.easeOut.config(0.5, 0.4) }, 0)
.from(jaw, 1.9, { scaleX: 1.15, y: "+=10", ease: Elastic.easeOut.config(0.5, 0.4) }, 0)
.from(head, 1.4, { scaleX: 1.1, ease: Elastic.easeOut.config(0.5, 0.4) }, 0)
.staggerFrom([brow_l, brow_r], 2, { y: "+=50", ease: Elastic.easeOut.config(0.5, 0.2) }, 0.05, 0)
.staggerFrom([ear_l, ear_r], 2.5, { rotation: 10, ease: Elastic.easeOut.config(3.7, 0.4) }, 0.1, 0)
.add(mouthmovy, 0.5);
//animate
var bot_message_tl = new TimelineMax({ onUpdate: el.update, paused: false, repeat: 0})
.set(stageNull, { y: "-200" })
.from(head, 1.4, { y: "+=600", rotation: 45, ease: Elastic.easeOut.config(0.5, 0.4) }, 0)
.add(popup, 0.2)
.from(shades, 1, { y: -550, ease: Expo.easeOut }, 0.8)
.add(highlight_tl, 1.8)
.set(msg_text, { y: 520 }, 1.5)
.from(msg_text, 1, { scale: 0.5, ease: Elastic.easeOut.config(1.6, 0.9) }, 1.5);
return bot_message_tl;
}
var canvas = document.getElementById('canvas');
canvasScale = window.innerHeight/canvas.height;
TweenMax.set(canvas,{scale:canvasScale,transformOrigin:"top left"})
this.el = new elCanvas(canvas, {images:[],AlignToCenter:true});
var test_tl = new el_animation(this.el);
canvas.addEventListener('click',
function(){
test_tl.play(0)
})
!
