$(document).ready(function() {

var element_1 = $("#element_1"),
    element_2 = $("#element_2"),
    element_3 = $("#element_3"),
    element_4 = $("#element_4"),
    element_5 = $("#element_5"),
    element_6 = $("#element_6"),
    element_7 = $("#element_7"),
    element_8 = $("#element_8"),
    element_9 = $("#element_9"),
    element_10 = $("#element_10"),
    element_11 = $("#element_11"),
    element_12 = $("#element_12");
     
    var tl = new TimelineMax({repeat:-1, repeatDelay:1, yoyo:true});
      
    var tween = new TweenMax.set([element_1, element_2, element_3, element_4, element_5, element_6, element_7, element_8, element_9, element_10, element_11, element_12], {alpha:0});
    
    var tween = new TweenMax.set([element_1, element_2, element_3, element_4], {scale:0.5});
    
      tl.timeScale(0.3);
                 
      tl.to(element_1, 2, {top:"660px", left:"60px", rotation:"360deg", alpha:1, ease:Bounce.easeOut})
         .to(element_1, 2, {scale:1, ease:Elastic.easeOut})
         .add(TweenMax.to(element_1, 1, {backgroundColor:"#000000", boxShadow:"0px 0px 30px 5px #000000", repeat:1, yoyo:true}))
         
        .to(element_2, 2, {top:"600px", left:"170px", rotation:"-360deg", alpha:1, ease:Bounce.easeOut})
        .to(element_2, 2, {scale:1, ease:Elastic.easeOut})
        .add(TweenMax.to(element_2, 1, {backgroundColor:"#000000", boxShadow:"0px 0px 30px 5px #000000", repeat:1, yoyo:true}))
        
        .to(element_3, 2, {top:"580px", left:"270px", rotation:"360deg", alpha:1, ease:Bounce.easeOut})
        .to(element_3, 2, {scale:1, ease:Elastic.easeOut})
        .add(TweenMax.to(element_3, 1, {backgroundColor:"#000000", boxShadow:"0px 0px 30px 5px #000000", repeat:1, yoyo:true}))
        
        .to(element_4, 2, {top:"520px", left:"370px", rotation:"-360deg", alpha:1, ease:Bounce.easeOut})
        .to(element_4, 2, {scale:1, ease:Elastic.easeOut})
        .add(TweenMax.to(element_4, 1, {backgroundColor:"#000000", boxShadow:"0px 0px 30px 5px #000000", repeat:1, yoyo:true}))
        
        .to(element_5, 2, {top:"-145px", left:"160px", alpha:1, ease:Elastic.easeOut})
        .to(element_5, 0.3, {boxShadow: "0px 0px 10px 6px black", backgroundColor:"#000000"})
        
        .to(element_6, 2, {top:"-120px", right:"-80px", alpha:1, ease:Elastic.easeOut})
        .to(element_6, 0.3, {boxShadow: "0px 0px 10px 6px black", backgroundColor:"#000000"})
        
        .to(element_7, 2, {top:"-90px", left:"160px", alpha:1, ease:Elastic.easeOut})
        .to(element_7, 0.3, {boxShadow: "0px 0px 10px 6px black", backgroundColor:"#000000"});
          
          tl.add("etykieta_1", 6);
          tl.add("etykieta_2", 8);
          tl.add("etykieta_3", 10);
          
          tl.add(TweenMax.to(element_8, 2.5, {top:"-350px", left:"120px", alpha:1, fontSize:"20pt", ease:Elastic.easeOut}), "etykieta_1");
          tl.add(TweenMax.to(element_8, 1, {top:"-500px", left:"120px", color:"#ffffff", backgroundColor:"#ff0000"}), "etykieta_2");
          tl.add(TweenMax.to(element_8, 1, {alpha:0, top:"-800px", left:"120px",}), "etykieta_3");
          
          tl.add("etykieta_4", 7);
          tl.add("etykieta_5", 9);
          tl.add("etykieta_6", 11);
          
          tl.add(TweenMax.to(element_9, 2.5, {top:"-350px", left:"120px", alpha:1, fontSize:"20pt", ease:Elastic.easeOut}), "etykieta_4");
          tl.add(TweenMax.to(element_9, 0.5, {top:"-500px", left:"120px", color:"#ffffff", backgroundColor:"#008000"}), "etykieta_5");
          tl.add(TweenMax.to(element_9, 0.5, {alpha:0, top:"-800px", left:"120px",}), "etykieta_6");
          
          tl.add("etykieta_7", 8);
          tl.add("etykieta_8", 10);
          tl.add("etykieta_9", 12);
          
          tl.add(TweenMax.to(element_10, 2.5, {top:"-350px", left:"120px", alpha:1, fontSize:"20pt", ease:Elastic.easeOut}), "etykieta_7");
          tl.add(TweenMax.to(element_10, 0.5, {top:"-500px", left:"120px", color:"#ffffff", backgroundColor:"#800080"}), "etykieta_8");
          tl.add(TweenMax.to(element_10, 0.5, {alpha:0, top:"-800px", left:"120px",}), "etykieta_9");
          
          tl.add("etykieta_10", 9);
          tl.add("etykieta_11", 11);
          tl.add("etykieta_12", 13);
          
          tl.add(TweenMax.to(element_11, 2.5, {top:"-350px", left:"120px", alpha:1, fontSize:"20pt", ease:Elastic.easeOut}), "etykieta_10");
          tl.add(TweenMax.to(element_11, 0.5, {top:"-500px", left:"120px", color:"#ffffff", backgroundColor:"#00B0F0"}), "etykieta_11");
          tl.add(TweenMax.to(element_11, 0.5, {alpha:0, top:"-800px", left:"120px",}), "etykieta_12");
          
          tl.add("etykieta_13", 14);
          tl.add("etykieta_14", 16);
          tl.add("etykieta_15", 18);
          tl.add("etykieta_16", 20);
          tl.add("etykieta_17", 22);
          tl.add("etykieta_18", 24);
          
          tl.add(TweenMax.to(element_12, 2.5, {top:"-850px", left:"10px", alpha:1, fontSize:"20pt", ease:Expo.easeInOut}), "etykieta_13");
          tl.add(TweenMax.to(element_12, 1, {top:"-750px", left:"340px", textShadow:"4px 4px 15px rgba(128, 0, 128, 1)", color:"#800080"}), "etykieta_14");
          tl.add(TweenMax.to(element_12, 1, {top:"-650px", left:"10px", textShadow:"4px 4px 15px rgba(255, 0, 0, 1)", color:"#ff0000"}), "etykieta_15");
          tl.add(TweenMax.to(element_12, 1, {top:"-550px", left:"340px", textShadow:"4px 4px 15px rgba(128, 0, 128, 1)", color:"#008000"}), "etykieta_16");
          tl.add(TweenMax.to(element_12, 1, {top:"-450px", left:"10px", textShadow:"4px 4px 15px rgba(0, 176, 240, 1)", color:"#00B0F0"}), "etykieta_17");
          tl.add(TweenMax.to(element_12, 1, {alpha:0, top:"-850px", left:"650px", textShadow:"4px 4px 15px rgba(0, 0, 0, 1)", color:"#000000"}), "etykieta_18");
});



