Team:WITS-CSIR SA/Animation/Placeholder edge.js

From 2011.igem.org

/**

* Adobe Helium: symbol definitions
*/

window.symbols = { "stage": {

  version: "0.1",
  baseState: "Base State",
  initialState: "Base State",
  parameters: {
  },
  content: {
     dom: [
       {
           id:'Text1',
           type:'text',
           rect:[49,242,0,0],
           text:"A",
           font:["Arial Black, Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none",""],
       },
       {
           id:'Text2',
           type:'text',
           rect:[85,265,0,0],
           text:"N",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text3',
           type:'text',
           rect:[132,238,0,0],
           text:"I",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text4',
           type:'text',
           rect:[182,275,0,0],
           text:"M",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text5',
           type:'text',
           rect:[254,239,0,0],
           text:"A",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text6',
           type:'text',
           rect:[305,266,0,0],
           text:"T",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text7',
           type:'text',
           rect:[337,218,0,0],
           text:"I",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text8',
           type:'text',
           rect:[387,211,0,0],
           text:"O",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text9',
           type:'text',
           rect:[427,222,0,0],
           text:"N",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
       {
           id:'Text10',
           type:'text',
           rect:[221,147,0,0],
           text:"Placeholder",
           align:"-webkit-auto",
           font:["\'Arial Black\', Gadget, sans-serif",24,"rgba(0,0,0,1)","normal","none","normal"],
       },
     ],
     symbolInstances: [
     ],
  },
  states: {
     "Base State": {
        "#stage": [
           ["color", "background-color", 'rgba(255,255,255,1)'],
           ["style", "overflow", 'hidden'],
           ["style", "height", '300px'],
           ["style", "width", '930px']
        ],
        "#Text8": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-238px'],
           ["transform", "translateX", '-245px']
        ],
        "#Text4": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-302px'],
           ["transform", "translateX", '-119px']
        ],
        "#Text9": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-249px'],
           ["transform", "translateX", '-263px']
        ],
        "#Text6": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-293px'],
           ["transform", "translateX", '-196px']
        ],
        "#Text5": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-266px'],
           ["transform", "translateX", '-165px']
        ],
        "#Text10": [
           ["transform", "translateX", '-94px'],
           ["color", "color", 'rgba(164,164,164,1.00)'],
           ["style", "opacity", '0'],
           ["transform", "translateY", '4px'],
           ["style", "font-size", '16px']
        ],
        "#Text7": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-245px'],
           ["transform", "translateX", '-207px']
        ],
        "#Text3": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-265px'],
           ["transform", "translateX", '-80px']
        ],
        "#Text2": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-292px'],
           ["transform", "translateX", '-55px']
        ],
        "#Text1": [
           ["color", "color", 'rgba(102,167,189,1.00)'],
           ["transform", "translateY", '-269px'],
           ["transform", "translateX", '-40px']
        ]
     }
  },
  actions: {
  },
  bindings: [
  ],
  timelines: {
     "Default Timeline": {
        fromState: "Base State",
        toState: "",
        duration: 7500,
        timeline: [
           { id: "eid84", tween: [ "color", "#Text7", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid74", tween: [ "transform", "#Text10", "translateX", '-94px', { valueTemplate: undefined, fromValue: '-94px'}], position: 6750, duration: 0, easing: "linear" },
           { id: "eid54", tween: [ "transform", "#Text9", "translateY", '-249px', { valueTemplate: undefined, fromValue: '-249px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid68", tween: [ "transform", "#Text9", "translateY", '-99px', { valueTemplate: undefined, fromValue: '-249px'}], position: 6000, duration: 750, easing: "easeOutBounce" },
           { id: "eid82", tween: [ "color", "#Text9", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid35", tween: [ "transform", "#Text4", "translateX", '-119px', { valueTemplate: undefined, fromValue: '-119px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid79", tween: [ "color", "#Text1", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid57", tween: [ "transform", "#Text7", "translateY", '-245px', { valueTemplate: undefined, fromValue: '-245px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid66", tween: [ "transform", "#Text7", "translateY", '-95px', { valueTemplate: undefined, fromValue: '-245px'}], position: 4500, duration: 750, easing: "easeOutBounce" },
           { id: "eid11", tween: [ "transform", "#Text1", "translateX", '-40px', { valueTemplate: undefined, fromValue: '-40px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid45", tween: [ "transform", "#Text7", "translateX", '-207px', { valueTemplate: undefined, fromValue: '-207px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid39", tween: [ "transform", "#Text6", "translateX", '-196px', { valueTemplate: undefined, fromValue: '-196px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid52", tween: [ "transform", "#Text5", "translateY", '-266px', { valueTemplate: undefined, fromValue: '-266px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid64", tween: [ "transform", "#Text5", "translateY", '-116px', { valueTemplate: undefined, fromValue: '-266px'}], position: 3000, duration: 750, easing: "easeOutBounce" },
           { id: "eid60", tween: [ "transform", "#Text1", "translateY", '-119px', { valueTemplate: undefined, fromValue: '-269px'}], position: 0, duration: 750, easing: "easeOutBounce" },
           { id: "eid80", tween: [ "color", "#Text8", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid13", tween: [ "transform", "#Text2", "translateX", '-55px', { valueTemplate: undefined, fromValue: '-55px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid34", tween: [ "transform", "#Text3", "translateX", '-80px', { valueTemplate: undefined, fromValue: '-80px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid53", tween: [ "transform", "#Text3", "translateY", '-265px', { valueTemplate: undefined, fromValue: '-265px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid62", tween: [ "transform", "#Text3", "translateY", '-115px', { valueTemplate: undefined, fromValue: '-265px'}], position: 1500, duration: 750, easing: "easeOutBounce" },
           { id: "eid55", tween: [ "transform", "#Text2", "translateY", '-292px', { valueTemplate: undefined, fromValue: '-292px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid61", tween: [ "transform", "#Text2", "translateY", '-142px', { valueTemplate: undefined, fromValue: '-292px'}], position: 750, duration: 750, easing: "easeOutBounce" },
           { id: "eid83", tween: [ "color", "#Text4", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid88", tween: [ "style", "#stage", "height", '230px', { valueTemplate: undefined, fromValue: '300px'}], position: 0, duration: 7500, easing: "linear" },
           { id: "eid46", tween: [ "transform", "#Text8", "translateX", '-245px', { valueTemplate: undefined, fromValue: '-245px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid1", tween: [ "style", "#stage", "width", '930px', { valueTemplate: undefined, fromValue: '930px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid50", tween: [ "transform", "#Text9", "translateX", '-263px', { valueTemplate: undefined, fromValue: '-263px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid51", tween: [ "transform", "#Text8", "translateY", '-238px', { valueTemplate: undefined, fromValue: '-238px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid67", tween: [ "transform", "#Text8", "translateY", '-88px', { valueTemplate: undefined, fromValue: '-238px'}], position: 5250, duration: 750, easing: "easeOutBounce" },
           { id: "eid59", tween: [ "transform", "#Text6", "translateY", '-293px', { valueTemplate: undefined, fromValue: '-293px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid65", tween: [ "transform", "#Text6", "translateY", '-143px', { valueTemplate: undefined, fromValue: '-293px'}], position: 3750, duration: 750, easing: "easeOutBounce" },
           { id: "eid87", tween: [ "color", "#Text10", "color", 'rgba(221,231,240,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(164,164,164,1)'}], position: 6750, duration: 750, easing: "linear" },
           { id: "eid78", tween: [ "color", "#Text6", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid85", tween: [ "color", "#Text5", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid75", tween: [ "transform", "#Text10", "translateY", '4px', { valueTemplate: undefined, fromValue: '4px'}], position: 6750, duration: 0, easing: "linear" },
           { id: "eid81", tween: [ "color", "#Text2", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid77", tween: [ "style", "#Text10", "opacity", '1', { valueTemplate: undefined, fromValue: '0'}], position: 6750, duration: 750, easing: "linear" },
           { id: "eid73", tween: [ "style", "#Text10", "font-size", '16px', { valueTemplate: undefined, fromValue: '16px'}], position: 6750, duration: 0, easing: "linear" },
           { id: "eid32", tween: [ "transform", "#Text5", "translateX", '-165px', { valueTemplate: undefined, fromValue: '-165px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid86", tween: [ "color", "#Text3", "color", 'rgba(102,167,189,1.00)', { animationColorSpace: 'RGB', valueTemplate: undefined, fromValue: 'rgba(102,167,189,1.00)'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid58", tween: [ "transform", "#Text4", "translateY", '-302px', { valueTemplate: undefined, fromValue: '-302px'}], position: 0, duration: 0, easing: "linear" },
           { id: "eid63", tween: [ "transform", "#Text4", "translateY", '-152px', { valueTemplate: undefined, fromValue: '-302px'}], position: 2250, duration: 750, easing: "easeOutBounce" }]
     }
  },

}};

/**

* Adobe Edge DOM Ready Event Handler
*/

$(window).ready(function() {

    $.Edge.initialize(symbols);

}); /**

* Adobe Edge Timeline Launch
*/

$(window).load(function() {

   $('#stage').prependTo('body');
   $('#globalWrapper').hide();
   $.Edge.play();

});