<div class="container">
 <svg viewBox="0 0 300 300">
  <g id="widget" transform="matrix(1,0,0,1,150,150)">
    <path d="M112.034,147.323 L-112.034,147.323 C-131.725,147.323 -147.342,131.366 -147.342,112.015 L-147.342,-111.714 C-147.342,-131.405 -131.386,-147.022 -112.034,-147.022 L112.034,-147.022 C131.725,-147.022 147.342,-131.065 147.342,-111.714 L147.342,112.355 C147.002,131.366 131.386,147.323 112.034,147.323 Z" fill="#ff002c" fill-opacity="1" />
        <!-- background -->
    <path class="background-black" d="M32.5195,3.43278 C32.5195,21.4866 17.884,36.1221 -0.169749,36.1221 C-18.2235,36.1221 -32.859,21.4866 -32.859,3.43278 C-32.859,-14.621 -18.2235,-29.2565 -0.169749,-29.2565 C17.884,-29.2565 32.5195,-14.621 32.5195,3.43278 Z" fill="#000000" fill-opacity="1" />
    <path class="background-inner-circle" d="M50.898,5.58241 C49.035,33.7718 24.6447,55.1382 -3.54469,53.2752 C-31.7341,51.4123 -53.1005,27.0219 -51.2375,-1.16748 C-49.3745,-29.3569 -24.9842,-50.7233 3.20519,-48.8603 C31.3946,-46.9973 52.761,-22.607 50.898,5.58241 Z M1.85522,-28.4332 C-15.0993,-29.5537 -29.6899,-16.772 -30.8104,0.1825 C-31.9309,17.137 -19.1492,31.7276 -2.19471,32.8481 C14.7598,33.9686 29.3504,21.1869 30.4709,4.23243 C31.5914,-12.722 18.8097,-27.3127 1.85522,-28.4332 Z" fill="#ff6a27" fill-opacity="1" stroke-width="4.18879" stroke="#f64d29" stroke-linecap="square" stroke-linejoin="miter" />
    <path class="background-middle-circle" d="M72.6097,21.7652 C61.1896,61.9394 19.3158,85.2761 -20.8584,73.856 C-61.0327,62.4358 -84.3694,20.562 -72.9492,-19.6122 C-61.5291,-59.7865 -19.6553,-83.1232 20.5189,-71.703 C60.6932,-60.2829 84.0299,-18.4091 72.6097,21.7652 Z M12.2435,-42.5912 C-11.9193,-49.4599 -36.9688,-35.4995 -43.8374,-11.3367 C-50.7061,12.826 -36.7457,37.8755 -12.583,44.7442 C11.5798,51.6128 36.6293,37.6524 43.4979,13.4897 C50.3666,-10.6731 36.4062,-35.7226 12.2435,-42.5912 Z" fill="#ff6a27" fill-opacity="1" stroke-width="4.18879" stroke="#f64d29" stroke-linecap="square" stroke-linejoin="miter" />
    <path class="background-top-circle" d="M106.359,0.150561 C106.359,58.9546 58.6343,106.68 -0.169749,106.68 C-58.9738,106.68 -106.699,58.9546 -106.699,0.150561 C-106.699,-58.6535 -58.9738,-106.379 -0.169749,-106.379 C58.6343,-106.379 106.359,-58.6535 106.359,0.150561 Z M-0.169749,-63.767 C-35.5374,-63.767 -64.0873,-35.2171 -64.0873,0.150561 C-64.0873,35.5182 -35.5374,64.0681 -0.169749,64.0681 C35.1979,64.0681 63.7478,35.5182 63.7478,0.150561 C63.7478,-35.2171 35.1979,-63.767 -0.169749,-63.767 Z" fill="#ff6a27" fill-opacity="1" stroke-width="4.18879" stroke="#f64d29" stroke-linecap="square" stroke-linejoin="miter" />
     <path d="M147.002,0.150561 C147.002,81.3896 81.0692,147.323 -0.169749,147.323 C-81.4087,147.323 -147.342,81.3896 -147.342,0.150561 C-147.342,-81.0884 -81.4087,-147.022 -0.169749,-147.022 C81.0692,-147.022 147.002,-81.0884 147.002,0.150561 Z M-0.169749,-88.1528 C-49.0309,-88.1528 -88.4731,-48.7105 -88.4731,0.150561 C-88.4731,49.0117 -49.0309,88.4539 -0.169749,88.4539 C48.6914,88.4539 88.1336,49.0117 88.1336,0.150561 C88.1336,-48.7105 48.6914,-88.1528 -0.169749,-88.1528 Z" fill="#ff002c" fill-opacity="1" />
        
        <!-- letter Y block -->
    <path class="y-block" d="M67.2237,16.7779 L55.405,13.8522 L62.5356,6.517 L57.7655,-13.5955 L69.298,-10.7407 L70.1802,-4.85743 Q70.3653,-3.64209 70.4012,-2.25353Q70.4371,-0.864973 70.3195,0.714028L71.1421,-0.891448 Q72.749,-3.94743 73.7951,-5.3514L76.5095,-8.95554 L87.9848,-6.11489 Z" fill="#000000" fill-opacity="1" />
    <path class="y-block" d="M71.579,16.4207 L61.5518,13.9386 L67.9233,6.41543 L64.5457,-13.3524 L74.33,-10.9303 L74.8781,-5.12973 Q74.9938,-3.93158 74.9755,-2.55644Q74.9571,-1.1813 74.8006,0.388034L75.5624,-1.23248 Q77.0478,-4.31853 77.9941,-5.74719L80.4483,-9.41576 L90.184,-7.00572 Z" fill="#0c7bfa" fill-opacity="1" stroke-width="0.228395" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- letter L block -->
    <path class="l-block" d="M-57.3923,-6.62067 L-73.9654,2.17148 L-90.2735,-28.5691 L-80.8064,-33.5915 L-68.4169,-10.2374 L-61.3109,-14.0072 Z" fill="#000000" fill-opacity="1" />
    <path class="l-block" d="M-52.8465,-1.65706 L-76.2911,4.39002 L-86.1175,-33.7072 L-72.7252,-37.1615 L-65.2599,-8.21847 L-55.2076,-10.8113 Z" fill="#d900d0" fill-opacity="1" stroke-width="0.475822" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- first letter O block -->
    <path class="o1-block" d="M-20.313,-30.2171 Q-18.0214,-22.1616 -21.4039,-15.7479Q-24.763,-9.36562 -32.4526,-7.17805Q-39.2746,-5.23733 -45.2488,-7.70648Q-52.7718,-10.845 -55.5503,-20.612Q-58.212,-29.9682 -53.2177,-36.7417Q-49.5055,-41.7692 -42.9828,-43.6248Q-34.994,-45.8975 -28.8512,-42.2676Q-22.7085,-38.6377 -20.313,-30.2171Z M-33.2492,-26.463 Q-35.9693,-36.0246 -40.3976,-34.7648Q-42.6117,-34.1349 -43.2141,-31.2502Q-43.8386,-28.5565 -42.5532,-24.0381Q-41.2872,-19.5882 -39.3776,-17.4798Q-37.4679,-15.3714 -35.3136,-15.9842Q-33.0995,-16.6141 -32.5908,-19.3735Q-32.0223,-22.15 -33.2492,-26.463Z" fill="#000000" fill-opacity="1" />
        <path class="o1-block" d="M-23.2744,-30.9932 Q-21.2509,-23.2236 -25.0331,-17.0444Q-28.7897,-10.8954 -36.8493,-8.79644Q-43.9994,-6.93432 -50.0799,-9.32278Q-57.7354,-12.3587 -60.1887,-21.779Q-62.5389,-30.8032 -57.0717,-37.3272Q-53.0083,-42.1694 -46.1718,-43.9499Q-37.7986,-46.1305 -31.5941,-42.6227Q-25.3895,-39.1149 -23.2744,-30.9932Z M-36.8362,-27.3907 Q-39.2379,-36.613 -43.8792,-35.4043Q-46.1999,-34.7999 -46.9492,-32.0194Q-47.713,-29.4232 -46.5781,-25.0652Q-45.4603,-20.7732 -43.574,-18.7379Q-41.6877,-16.7025 -39.4298,-17.2906Q-37.1091,-17.8949 -36.4623,-20.5547Q-35.7528,-23.2308 -36.8362,-27.3907Z" fill="#fe002c" fill-opacity="1" stroke-width="0.361625" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- first letter N block -->
    <path class="n1-block" d="M6.25226,-14.9436 L11.2465,-37.9459 L19.2264,-36.2133 L21.6637,-27.2288 Q21.8493,-26.4397 22.0798,-25.4224Q22.3103,-24.4052 22.5696,-23.0853L22.9918,-20.872 Q23.1809,-23.9666 23.4028,-26.1492Q23.6248,-28.3318 23.9385,-29.7769L25.0609,-34.9465 L33.0408,-33.2139 L28.0465,-10.2116 L20.0667,-11.9442 L17.6935,-21.3204 Q17.3262,-22.8197 17.052,-24.1195Q16.7778,-25.4192 16.6097,-26.5789Q16.3431,-24.094 16.072,-22.2652Q15.8009,-20.4364 15.5066,-19.0807L14.2321,-13.211 Z" fill="#000000" fill-opacity="1" />
        
        <!-- second letter O block -->
    <path class="o2-block" d="M14.1326,-19.6562 Q13.8443,-11.6178 9.05336,-6.75053Q4.29182,-1.90504 -3.06784,-2.16896Q-9.59703,-2.4031 -14.1268,-6.41892Q-19.8226,-11.5026 -19.4731,-21.2489Q-19.1383,-30.5854 -12.8328,-35.3071Q-8.14809,-38.8101 -1.90527,-38.5862Q5.74075,-38.312 10.0873,-33.1855Q14.4339,-28.059 14.1326,-19.6562Z M1.73043,-20.0325 Q2.07259,-29.5739 -2.16565,-29.7259Q-4.28478,-29.8019 -5.63462,-27.3422Q-6.9493,-25.0636 -7.11099,-20.5548Q-7.27022,-16.1143 -6.19822,-13.6248Q-5.12622,-11.1352 -3.06437,-11.0613Q-0.945244,-10.9853 0.286788,-13.358Q1.57609,-15.7287 1.73043,-20.0325Z" fill="#000000" fill-opacity="1" />
    <path class="o2-block" d="M10.748,-15.8133 Q10.4598,-7.77481 5.66879,-2.90758Q0.907249,1.93791 -6.45241,1.67399Q-12.9816,1.43985 -17.5114,-2.57597Q-23.2072,-7.65966 -22.8577,-17.406Q-22.5229,-26.7424 -16.2174,-31.4641Q-11.5327,-34.9671 -5.28984,-34.7433Q2.35619,-34.4691 6.70278,-29.3426Q11.0494,-24.216 10.748,-15.8133Z M-1.65414,-16.1896 Q-1.31198,-25.731 -5.55022,-25.883Q-7.66934,-25.959 -9.01919,-23.4992Q-10.3339,-21.2207 -10.4956,-16.7119Q-10.6548,-12.2714 -9.58279,-9.7818Q-8.51078,-7.29225 -6.44893,-7.21831Q-4.32981,-7.14231 -3.09778,-9.51505Q-1.80847,-11.8857 -1.65414,-16.1896Z" fill="#feea4b" fill-opacity="1" stroke-width="0.285493" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- cont first letter N block -->
    <path class="n1-block" d="M10.8233,-13.928 L11.9596,-19.1753 L25.0853,-16.3329 L23.9491,-11.0856 L10.8233,-13.928 L10.8233,-13.928 Z" fill="#000000" fill-opacity="1" />
        
        <!-- first letter E block -->
    <path class="e1-block" d="M53.5643,-2.50596 L44.1284,1.46194 L32.8241,-25.4202 L42.26,-29.3881 L53.5643,-2.50596 L53.5643,-2.50596 Z" fill="#000000" fill-opacity="1" />
        
        <!-- cont N block -->
    <path class="n1-block" d="M10.7107,-14.7729 L15.7255,-37.8696 L23.4023,-36.2028 L25.6731,-27.2198 Q25.8451,-26.4305 26.0585,-25.413Q26.2718,-24.3955 26.5102,-23.075L26.8979,-20.8605 Q27.1071,-23.9636 27.3401,-26.1529Q27.5731,-28.3423 27.8881,-29.7934L29.0152,-34.9841 L36.6919,-33.3174 L31.6771,-10.2206 L24.0004,-11.8874 L21.7946,-21.2636 Q21.4537,-22.7631 21.2008,-24.0633Q20.9478,-25.3635 20.7959,-26.5243Q20.5173,-24.0316 20.24,-22.1964Q19.9627,-20.3612 19.6672,-19L18.3875,-13.1061 Z" fill="#fcae3f" fill-opacity="1" stroke-width="0.171296" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- cont E block -->
    <path class="e1-block" d="M46.6661,-19.7998 L46.9112,-26.6346 L56.8441,-26.2784 L56.599,-19.4436 L46.6661,-19.7998 L46.6661,-19.7998 Z" fill="#000000" fill-opacity="1" />
    <path class="e1-block" d="M52.363,-7.67331 L58.7531,-15.3865 L48.7734,-14.4396 Z" fill="#000000" fill-opacity="1" />
    <path class="e1-block" d="M43.6577,-0.0329157 L36.4935,-27.7862 L55.0606,-32.5791 L56.7449,-26.0542 L48.1681,-23.8402 L49.2121,-19.7958 L56.9025,-21.781 L58.5218,-15.5077 L50.8315,-13.5226 L51.9265,-9.28047 L60.5033,-11.4945 L62.2247,-4.82575 Z" fill="#fe002c" fill-opacity="1" stroke-width="0.323559" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <g class="tunes" id="tunes">
        <!-- letter T block -->
    <path class="t-block" d="M-71.1194,12.4095 L-62.5737,21.2594 L-62.2677,12.7269 Z" fill="#000000" fill-opacity="1" />
    <path d="M-37.4212,13.6179 L-46.5788,21.833 L-46.2729,13.3005 Z" fill="#000000" fill-opacity="1" />
    <path class="t-block" d="M-45.3633,37.6795 L-47.5127,37.721 L-47.9115,17.0551 L-45.7621,17.0137 L-45.3633,37.6795 Z" fill="#000000" fill-opacity="1" />
    <path class="t-block" d="M-62.6923,33.5268 L-45.3668,37.7772 L-62.2481,43.5444 Z" fill="#000000" fill-opacity="1" />
    <path d="M-46.8893,37.6576 L-63.0687,37.0774 L-62.1914,12.6151 L-71.1153,12.2951 L-70.8388,4.58554 L-36.4626,5.81829 L-36.7391,13.5279 L-46.0121,13.1953 Z" fill="#0c7bfa" fill-opacity="1" stroke-width="0.171296" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- letter U block -->
    <path class="u-block" d="M-27.4052,20.0091 L-19.561,19.2349 L-18.186,33.1667 Q-18.0135,34.9145 -18.7153,36.0788Q-19.3933,37.2923 -21.1461,38.3928Q-23.5083,39.8626 -27.0636,40.2135Q-31.0892,40.6108 -33.9502,39.5277Q-37.5814,38.1469 -37.9554,34.3578L-39.2562,21.1787 L-31.4119,20.4045 L-30.1578,33.1116 Q-30.0306,34.4001 -29.5169,34.8905Q-29.0031,35.3808 -27.9121,35.2731Q-26.7834,35.1617 -26.3999,34.6215Q-26.0188,34.0557 -26.1498,32.7289Z" fill="#000000" fill-opacity="1" />
    <path class="u-block" d="M-28.5361,21.7709 L-21.4471,14.4395 L-18.6457,24.2453 Z" fill="#000000" fill-opacity="1" />
    <path class="u-block" d="M-21.7662,14.4753 L-11.3468,13.447 L-9.73324,29.7961 Q-9.5308,31.8472 -10.4796,33.2259Q-11.3975,34.6619 -13.7398,35.9816Q-16.8962,37.7444 -21.6186,38.2105Q-26.9657,38.7382 -30.7454,37.5088Q-35.5424,35.9414 -35.9813,31.4948L-37.5077,16.029 L-27.0883,15.0006 L-25.6166,29.9125 Q-25.4673,31.4246 -24.7931,31.993Q-24.1189,32.5614 -22.6697,32.4184Q-21.1705,32.2704 -20.6534,31.6298Q-20.1393,30.9592 -20.293,29.4021Z" fill="#fcae3f" fill-opacity="1" stroke-width="0.26646" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
    <path class="u-block" d="M-37.0905,21.4869 L-37.5069,15.9605 L-39.2576,21.2188 Z" fill="#000000" fill-opacity="1" />
        
        <!-- second letter E block -->
    <path class="e2-block" d="M35.4924,37.5448 L19.4321,39.3029 L17.4405,21.1097 L33.5008,19.3516 L35.4924,37.5448 L35.4924,37.5448 Z" fill="#000000" fill-opacity="1" />
    <path class="e2-block"  d="M22.2022,18.9465 L15.4716,21.3533 L22.6127,21.04 Z" fill="#000000" fill-opacity="1" />
        
        <!-- second N block -->
    <path class="n2-block" d="M-5.1949,44.9666 L-10.9171,11.8614 L-1.77219,10.2807 L5.0387,21.0718 Q5.6072,22.0335 6.33099,23.2774Q7.05477,24.5214 7.95237,26.1549L9.4444,28.9001 Q8.17101,24.6818 7.36532,21.6633Q6.55963,18.6449 6.20014,16.5651L4.91414,9.12498 L14.059,7.54431 L19.7812,40.6496 L10.6363,42.2302 L3.70607,30.8856 Q2.61058,29.0655 1.70705,27.4662Q0.803527,25.8669 0.0771496,24.4025Q0.97994,27.8458 1.56624,30.4164Q2.15253,32.987 2.48978,34.9381L3.94997,43.386 Z" fill="#000000" fill-opacity="1" />
    <path class="n2-block" d="M-3.44327,12.7947 L8.98242,6.2001 L8.47594,20.2582 Z" fill="#000000" fill-opacity="1" />
    <path class="n2-block" d="M-10.9179,11.8842 L-7.91383,8.84276 L-6.78323,12.9655 Z" fill="#000000" fill-opacity="1" />
    <path class="n2-block" d="M-5.33082,41.097 L-8.99622,7.70139 L0.228854,6.68887 L6.35986,17.8802 Q6.86785,18.8752 7.51337,20.1615Q8.1589,21.4478 8.95383,23.1337L10.2734,25.9659 Q9.2631,21.6769 8.64548,18.6144Q8.02786,15.552 7.79758,13.4539L6.97382,5.94857 L16.1989,4.93605 L19.8643,38.3317 L10.6392,39.3442 L4.4233,27.593 Q3.44238,25.7087 2.63942,24.0566Q1.83646,22.4044 1.20196,20.898Q1.89024,24.3905 2.31656,26.9924Q2.74288,29.5943 2.95891,31.5625L3.89425,40.0845 Z" fill="#ffeb4c" fill-opacity="1" stroke-width="0.190329" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- cont second E block -->
    <path class="e2-block" d="M35.339,26.4086 L33.5911,22.2206 L34.0251,26.7379 Z" fill="#000000" fill-opacity="1" />
    <path class="e2-block" d="M26.9695,33.599 L27.0952,30.0941 L35.8625,30.4085 L35.7368,33.9134 L26.9695,33.599 L26.9695,33.599 Z" fill="#000000" fill-opacity="1" />
    <path class="e2-block" d="M21.4992,37.3833 L22.1563,19.0591 L36.1373,19.5604 L35.9828,23.8685 L29.5245,23.6369 L29.4287,26.3072 L35.2196,26.5149 L35.071,30.6568 L29.2802,30.4492 L29.1798,33.25 L35.6381,33.4816 L35.4802,37.8847 Z" fill="#d900d0" fill-opacity="1" stroke-width="0.228395" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        
        <!-- letter S block -->
    <path class="s-block" d="M42.2213,36.4754 L41.2358,30.7136 Q44.0455,32.2872 46.9152,31.7964Q47.9989,31.6111 48.6233,31.1558Q49.2477,30.7005 49.1603,30.1897Q49.0343,29.4531 47.4294,29.0062L45.9571,28.6099 Q44.4889,28.2375 43.423,27.8023Q42.3571,27.3671 41.6464,26.8345Q40.9357,26.3019 40.5389,25.6728Q40.1421,25.0437 40.0141,24.2952Q39.7947,23.0122 40.5583,21.4387Q40.9482,20.6995 41.518,20.0457Q42.0878,19.3919 42.8796,18.8285Q45.0444,17.2355 48.3957,16.6623Q51.3857,16.1508 54.5765,16.5711L55.5356,22.1784 Q54.3516,21.415 52.9547,21.0975Q51.5579,20.7801 50.2936,20.9963Q49.3304,21.1611 48.7652,21.6001Q48.1779,22.0307 48.2551,22.4822Q48.3811,23.2187 50.2108,23.6517L51.6348,24.0072 Q54.4768,24.6828 55.8238,25.6751Q57.1909,26.664 57.4632,28.256Q57.9265,30.9646 55.4378,33.2Q52.9492,35.4353 48.6747,36.1664Q45.7248,36.671 42.2213,36.4754Z" fill="#000000" fill-opacity="1" />
    <path class="s-block" d="M52.5098,27.8271 L47.017,23.9147 L51.9103,17.0448 L57.4031,20.9572 L52.5098,27.8271 Z" fill="#000000" fill-opacity="1" />
    <path class="s-block" d="M41.2626,30.7795 L44.3605,29.1354 L44.2343,32.6403 Z" fill="#000000" fill-opacity="1" />
    <path class="s-block" d="M44.1773,32.3042 L42.4993,28.3502 L41.2306,30.7399 Z" fill="#000000" fill-opacity="1" />
    <path class="s-block" d="M43.5756,33.7314 L42.7004,28.6145 Q45.488,29.962 48.3763,29.468Q49.4671,29.2814 50.1024,28.8633Q50.7377,28.4451 50.6601,27.9915Q50.5482,27.3374 48.9471,26.9705L47.4779,26.6463 Q46.0124,26.3432 44.9518,25.9762Q43.8911,25.6092 43.1886,25.1484Q42.4861,24.6876 42.1005,24.1346Q41.7148,23.5816 41.6012,22.917Q41.4063,21.7775 42.2033,20.3599Q42.609,19.6932 43.1934,19.0992Q43.7779,18.5051 44.5832,17.9873Q46.7862,16.5246 50.1593,15.9477Q53.1689,15.4329 56.3614,15.7447L57.2132,20.7245 Q56.0405,20.0672 54.6455,19.8117Q53.2505,19.5562 51.978,19.7739Q51.0084,19.9397 50.4328,20.3422Q49.8352,20.7376 49.9038,21.1385Q50.0156,21.7927 51.8426,22.1426L53.2641,22.4315 Q56.1017,22.9778 57.4335,23.8359Q58.7855,24.6905 59.0273,26.1043Q59.4387,28.5098 56.8982,30.5514Q54.3577,32.5931 50.0554,33.3289Q47.0862,33.8368 43.5756,33.7314Z" fill="#fcae3f" fill-opacity="1" stroke-width="0.304526" stroke="#000000" stroke-linecap="square" stroke-linejoin="miter" />
        </g>
  </g>
</svg>   
    </div>   

body {
  background-color: #ff002c;
  width: 100%;
  height: 300px;
  margin: 0;
  padding: 0;
}

svg {
  transform: scale(1.5);
  height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
}

/* translated to gsap */
.background-top-circle {
/* animation: backgroundBouncein 1s linear 2; 
  transform-origin: center; */
}

.background-middle-circle {
 /* animation: backgroundBouncein 1s 0.1s linear 2; 
  transform-origin: center; */
}

.background-inner-circle {
/*  animation: backgroundBouncein 1s 0.2s linear 2;
  transform-origin: center; */
}
/*
@keyframes backgroundBouncein {
  0% {
    transform: scale(0.7);
  }
  15% {
    transform: scale(1.1);
  }
  25% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
} */

.l-block {
 /* animation: bounce 1s ease-in 1; 
  transform-origin: center; */
}

.o1-block {
 /* animation: bounce 1s 0.1s linear 1;
  transform-origin: bottom; */
}

.o2-block {
  /*animation: bounce 1s 0.2s linear 1;
  transform-origin: bottom; */
}

.n1-block {
  /* animation: bounce 1s 0.3s linear 1;
  transform-origin: bottom; */
}

.e1-block {
  /* animation: bounce 1s 0.4s linear 1;
  transform-origin: bottom; */
}

.y-block {
 /* animation: bounce 1s 0.5s ease-out 1;
  transform-origin: top; */
}

.tunes {
 /* animation: bounceTunes 1s ease-out 1;
  transform-origin: center; */
}

/*@keyframes bounceTunes {
  0% {
    opacity: 0;
  }
  85% {
    opacity: 0;
  }
  86% {
    transform: scale(0);
  }
  95% {
    transform: scale(2) rotate(-15deg);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    transform: scale(0);
  }
  15% {
    transform: scale(2);
  }
  25% {
    transform: scale(1);
  }
} */

// pen by beatrize

/* translated css animation to gsap using the stagger method. one major advantage I've found using gsap is the elimination of manually defining styles for keyframes or % values along a sequence. it's especially helpful for animations that combine multiple elements/steps as timing and looping becomes tricky. */

var tl = new TimelineMax({repeat:-1, repeatDelay:2}); // -1 loops entire animation

tl.staggerTo( // stagger elements
  [".background-top-circle", ".background-middle-circle", ".background-inner-circle"],
  0.7, // duration of animation
  { 
    scale:0.7, // creates scale effect
    ease:Elastic.easeOut, // elastic animation
    transformOrigin:"center",
    repeat: 1 // repeats animation for "tunes"
  },
  0.2 // start time
);
 // insert looney text animation to play along/overlap with bg animation
tl.add("looney", // create label (name)
       0.1); // start play time in sequence

tl.add( // stagger elements...
  TweenMax.staggerFromTo(
    [".l-block", ".o1-block", ".o2-block", ".n1-block", ".e1-block", ".y-block"],
    0.5, 
    {scale:0,transformOrigin:"center"}, // from
    {scale:1,ease:Elastic.easeOut.config(2.5)}, // to
    0.1), // start time relative to bg timimg.. same as above with label?
    "looney" // add label
);

tl.play("looney"); // play looney

tl.add("tunes", 0.8); // insert tunes

tl.add ( TweenMax.fromTo(".tunes", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,ease:Elastic.easeOut.config(2.5)}), "tunes");
tl.play("tunes");

/* first attempt. worked but wasn't set up in a way where I can loop -___- */
/*
TweenMax.to(
  ".background-top-circle", // target class 
  /*
  0.7, 
  {  // set css properties
    scale:0.7,
    ease:Elastic.easeOut, // define animation 
    transformOrigin:"center",
    time:1, 
    repeat:1, 
    repeatDelay:0.2
  });

TweenMax.to(".background-middle-circle", 0.7, {scale:0.7, delay:0.2, ease:Elastic.easeOut, transformOrigin:"center", time:1, repeat:1});

TweenMax.to(".background-inner-circle", 0.7, {scale:0.7, delay:0.1, ease:Elastic.easeOut, transformOrigin:"center", time:1, repeat:1});
 
TweenMax.fromTo(".l-block", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,ease:Elastic.easeOut.config(2.5)});

TweenMax.fromTo(".o1-block", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,delay:0.1,ease:Elastic.easeOut.config(2.5)});

TweenMax.fromTo(".o2-block", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,delay:0.2,ease:Elastic.easeOut.config(2.5)});

TweenMax.fromTo(".n1-block", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,delay:0.3,ease:Elastic.easeOut.config(2.5)});

TweenMax.fromTo(".e1-block", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,delay:0.4,ease:Elastic.easeOut.config(2.5)});

TweenMax.fromTo(".y-block", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,delay:0.4,ease:Elastic.easeOut.config(2.5)});

TweenMax.fromTo(".tunes", 0.7, {scale:0, transformOrigin:"center", time:1}, {scale:1,delay:1,ease:Elastic.easeOut.config(2.5)}); */