<!DOCTYPE html>
<html lang="ja">
 	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		
  		<title>SVG test</title>
  		<!-- css -->
      <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css" type="text/css"><!-- リセットcss -->
  </head>
    
	<body>
    <svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
      <defs>
        <style>
          .cls-1 {
            fill: #7fc44c;
          }
    
          .cls-2 {
            fill: #6c7577;
          }
    
          .cls-3 {
            fill: #9fcae6;
          }
    
          .cls-4 {
            fill: #f2f2f2;
          }
    
          .cls-5 {
            fill: #3c3c3c;
          }
    
          .cls-6 {
            fill: #dcdcdc;
          }
    
          .cls-7 {
            fill: #d4d7d7;
          }
    
          .cls-8 {
            fill: #d60e1c;
          }
    
          .cls-9 {
            fill: #fff;
          }
    
          .cls-10 {
            fill: #4095cd;
          }
        </style>
      </defs>
      <title>city_easy</title>
      <g id="road">
        <g>
          <polygon class="cls-1" points="1994.54 1234.69 912.21 624.54 0 1122.35 0 1243.86 995.12 1785.77 1994.54 1234.69"/>
          <polygon class="cls-1" points="2000 1008.18 2000 30.92 1119.15 511.61 2000 1008.18"/>
          <polygon class="cls-1" points="0 1471.6 0 2000 606.61 2000 787.33 1900.35 0 1471.6"/>
          <polygon class="cls-1" points="1639.15 0 211.62 0 913.79 395.84 1639.15 0"/>
          <polygon class="cls-1" points="0 110.29 0 894.5 706.85 508.77 0 110.29"/>
          <polygon class="cls-1" points="1203.51 1899.25 1388.52 2000 2000 2000 2000 1460.07 1203.51 1899.25"/>
          <polygon class="cls-2" points="913.79 395.84 211.62 0 0 0 0 110.29 706.85 508.77 913.79 395.84"/>
          <polygon class="cls-2" points="912.21 624.54 1994.54 1234.69 2000 1231.68 2000 1008.18 1119.15 511.61 912.21 624.54"/>
          <polygon class="cls-2" points="706.85 508.77 0 894.5 0 1122.35 912.21 624.54 706.85 508.77"/>
          <polygon class="cls-2" points="1119.15 511.61 2000 30.92 2000 0 1639.15 0 913.79 395.84 1119.15 511.61"/>
          <polygon class="cls-2" points="913.79 395.84 706.85 508.77 912.21 624.54 1119.15 511.61 913.79 395.84"/>
          <polygon class="cls-2" points="995.12 1785.77 1203.51 1899.25 2000 1460.07 2000 1237.77 1994.54 1234.69 995.12 1785.77"/>
          <polygon class="cls-2" points="606.61 2000 970.33 2000 787.33 1900.35 606.61 2000"/>
          <polygon class="cls-2" points="2000 1237.77 2000 1231.68 1994.54 1234.69 2000 1237.77"/>
          <polygon class="cls-2" points="995.12 1785.77 0 1243.86 0 1471.6 787.33 1900.35 995.12 1785.77"/>
          <polygon class="cls-2" points="1020.8 2000 1388.52 2000 1203.51 1899.25 1020.8 2000"/>
          <polygon class="cls-2" points="995.12 1785.77 787.33 1900.35 970.33 2000 1020.8 2000 1203.51 1899.25 995.12 1785.77"/>
        </g>
      </g>
      <g id="car15">
        <g>
          <polygon class="cls-3" points="1658.55 93.95 1497.56 93.95 1505.09 43.24 1650.42 43.24 1658.55 93.95"/>
          <polygon class="cls-3" points="1634.24 68.93 1521.87 68.93 1546.06 3 1610.47 3 1634.24 68.93"/>
          <polygon class="cls-4" points="1614.18 45.05 1541.93 45.05 1557.48 14.77 1598.9 14.77 1614.18 45.05"/>
          <g>
            <circle class="cls-5" cx="1536.42" cy="93.95" r="18.42"/>
            <circle class="cls-6" cx="1536.42" cy="93.95" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="1615.82" cy="93.95" r="18.42"/>
            <circle class="cls-6" cx="1615.82" cy="93.95" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="car14">
        <g>
          <polygon class="cls-3" points="1279.65 262.87 1118.66 262.87 1126.18 212.16 1271.52 212.16 1279.65 262.87"/>
          <polygon class="cls-3" points="1255.34 237.85 1142.97 237.85 1167.16 171.92 1231.57 171.92 1255.34 237.85"/>
          <polygon class="cls-4" points="1235.28 213.97 1163.03 213.97 1178.58 183.69 1220 183.69 1235.28 213.97"/>
          <g>
            <circle class="cls-5" cx="1157.52" cy="262.87" r="18.42"/>
            <circle class="cls-6" cx="1157.52" cy="262.87" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="1236.92" cy="262.87" r="18.42"/>
            <circle class="cls-6" cx="1236.92" cy="262.87" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="house05">
        <g>
          <rect class="cls-7" x="1715.38" y="237.21" width="178.9" height="178.9"/>
          <polygon class="cls-8" points="1652.08 274.83 1804.83 122.08 1957.58 274.83 1652.08 274.83"/>
        </g>
      </g>
      <g id="house04">
        <g>
          <rect class="cls-7" x="1347.8" y="374.09" width="178.9" height="178.9"/>
          <polygon class="cls-8" points="1284.5 411.71 1437.25 258.96 1590 411.71 1284.5 411.71"/>
        </g>
      </g>
      <g id="house03">
        <g>
          <rect class="cls-7" x="1719.02" y="597.23" width="178.9" height="178.9"/>
          <polygon class="cls-8" points="1655.72 634.85 1808.47 482.1 1961.22 634.85 1655.72 634.85"/>
        </g>
      </g>
      <g id="car13">
        <g>
          <polygon class="cls-3" points="310.27 195.94 149.28 195.94 156.8 145.23 302.14 145.23 310.27 195.94"/>
          <polygon class="cls-3" points="285.96 170.92 173.59 170.92 197.77 104.99 262.19 104.99 285.96 170.92"/>
          <polygon class="cls-4" points="265.89 147.04 193.65 147.04 209.2 116.76 250.61 116.76 265.89 147.04"/>
          <g>
            <circle class="cls-5" cx="188.14" cy="195.94" r="18.42"/>
            <circle class="cls-6" cx="188.14" cy="195.94" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="267.54" cy="195.94" r="18.42"/>
            <circle class="cls-6" cx="267.54" cy="195.94" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="car12">
        <g id="car07">
          <g id="car10">
            <g id="car09">
              <g id="car08">
                <g id="car05">
                  <polygon class="cls-3" points="738.5 289.38 577.52 289.38 585.04 238.66 730.38 238.66 738.5 289.38"/>
                  <polygon class="cls-3" points="714.2 264.36 601.83 264.36 626.01 198.43 690.43 198.43 714.2 264.36"/>
                  <polygon class="cls-4" points="694.13 240.47 621.89 240.47 637.44 210.2 678.85 210.2 694.13 240.47"/>
                  <g>
                    <circle class="cls-5" cx="616.38" cy="289.38" r="18.42"/>
                    <circle class="cls-6" cx="616.38" cy="289.38" r="9.64"/>
                  </g>
                  <g>
                    <circle class="cls-5" cx="695.78" cy="289.38" r="18.42"/>
                    <circle class="cls-6" cx="695.78" cy="289.38" r="9.64"/>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g id="car11">
        <g>
          <polygon class="cls-3" points="1119.69 485.93 958.7 485.93 966.22 435.22 1111.56 435.22 1119.69 485.93"/>
          <polygon class="cls-3" points="1095.38 460.91 983 460.91 1007.19 394.98 1071.61 394.98 1095.38 460.91"/>
          <polygon class="cls-4" points="1075.32 437.03 1003.07 437.03 1018.62 406.75 1060.03 406.75 1075.32 437.03"/>
          <g>
            <circle class="cls-5" cx="997.56" cy="485.93" r="18.42"/>
            <circle class="cls-6" cx="997.56" cy="485.93" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="1076.96" cy="485.93" r="18.42"/>
            <circle class="cls-6" cx="1076.96" cy="485.93" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="car10-2" data-name="car10">
        <g id="car09-2" data-name="car09">
          <g id="car08-2" data-name="car08">
            <g id="car05-2" data-name="car05">
              <polygon class="cls-3" points="1315.77 773.39 1154.78 773.39 1162.31 722.67 1307.64 722.67 1315.77 773.39"/>
              <polygon class="cls-3" points="1291.46 748.37 1179.09 748.37 1203.28 682.43 1267.7 682.43 1291.46 748.37"/>
              <polygon class="cls-4" points="1271.4 724.48 1199.15 724.48 1214.7 694.21 1256.12 694.21 1271.4 724.48"/>
              <g>
                <circle class="cls-5" cx="1193.64" cy="773.39" r="18.42"/>
                <circle class="cls-6" cx="1193.64" cy="773.39" r="9.64"/>
              </g>
              <g>
                <circle class="cls-5" cx="1273.04" cy="773.39" r="18.42"/>
                <circle class="cls-6" cx="1273.04" cy="773.39" r="9.64"/>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g id="car09-3" data-name="car09">
        <g id="car08-3" data-name="car08">
          <g id="car05-3" data-name="car05">
            <polygon class="cls-3" points="1640.07 802.08 1479.08 802.08 1486.61 751.36 1631.94 751.36 1640.07 802.08"/>
            <polygon class="cls-3" points="1615.76 777.06 1503.39 777.06 1527.58 711.12 1592 711.12 1615.76 777.06"/>
            <polygon class="cls-4" points="1595.7 753.17 1523.45 753.17 1539.01 722.89 1580.42 722.89 1595.7 753.17"/>
            <g>
              <circle class="cls-5" cx="1517.94" cy="802.08" r="18.42"/>
              <circle class="cls-6" cx="1517.94" cy="802.08" r="9.64"/>
            </g>
            <g>
              <circle class="cls-5" cx="1597.34" cy="802.08" r="18.42"/>
              <circle class="cls-6" cx="1597.34" cy="802.08" r="9.64"/>
            </g>
          </g>
        </g>
      </g>
      <g id="car08-4" data-name="car08">
        <g id="car05-4" data-name="car05">
          <polygon class="cls-3" points="1817.24 1044.44 1656.25 1044.44 1663.78 993.73 1809.11 993.73 1817.24 1044.44"/>
          <polygon class="cls-3" points="1792.93 1019.42 1680.56 1019.42 1704.75 953.49 1769.17 953.49 1792.93 1019.42"/>
          <polygon class="cls-4" points="1772.87 995.54 1700.63 995.54 1716.18 965.26 1757.59 965.26 1772.87 995.54"/>
          <g>
            <circle class="cls-5" cx="1695.11" cy="1044.44" r="18.42"/>
            <circle class="cls-6" cx="1695.11" cy="1044.44" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="1774.51" cy="1044.44" r="18.42"/>
            <circle class="cls-6" cx="1774.51" cy="1044.44" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="car07-2" data-name="car07">
        <g id="car10-3" data-name="car10">
          <g id="car09-4" data-name="car09">
            <g id="car08-5" data-name="car08">
              <g id="car05-5" data-name="car05">
                <polygon class="cls-3" points="847.8 671.12 686.81 671.12 694.34 620.4 839.67 620.4 847.8 671.12"/>
                <polygon class="cls-3" points="823.49 646.1 711.12 646.1 735.31 580.16 799.73 580.16 823.49 646.1"/>
                <polygon class="cls-4" points="803.43 622.21 731.18 622.21 746.73 591.94 788.15 591.94 803.43 622.21"/>
                <g>
                  <circle class="cls-5" cx="725.67" cy="671.12" r="18.42"/>
                  <circle class="cls-6" cx="725.67" cy="671.12" r="9.64"/>
                </g>
                <g>
                  <circle class="cls-5" cx="805.07" cy="671.12" r="18.42"/>
                  <circle class="cls-6" cx="805.07" cy="671.12" r="9.64"/>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g id="car06">
        <g>
          <polygon class="cls-3" points="193.65 893.93 32.66 893.93 40.19 843.22 185.52 843.22 193.65 893.93"/>
          <polygon class="cls-3" points="169.34 868.91 56.97 868.91 81.16 802.98 145.57 802.98 169.34 868.91"/>
          <polygon class="cls-4" points="149.28 845.02 77.03 845.02 92.58 814.75 134 814.75 149.28 845.02"/>
          <g>
            <circle class="cls-5" cx="71.52" cy="893.93" r="18.42"/>
            <circle class="cls-6" cx="71.52" cy="893.93" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="150.92" cy="893.93" r="18.42"/>
            <circle class="cls-6" cx="150.92" cy="893.93" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="building03">
        <g>
          <rect class="cls-9" x="280.73" y="510.42" width="320" height="669.16"/>
          <g>
            <rect class="cls-10" x="348.73" y="597.29" width="184" height="141.64"/>
            <rect class="cls-10" x="348.73" y="774.18" width="184" height="141.64"/>
            <rect class="cls-10" x="348.73" y="951.07" width="184" height="141.64"/>
          </g>
        </g>
      </g>
      <g id="house02">
        <g>
          <rect class="cls-7" x="1328.47" y="1041.77" width="178.9" height="178.9"/>
          <polygon class="cls-8" points="1265.17 1079.39 1417.92 926.64 1570.67 1079.39 1265.17 1079.39"/>
        </g>
      </g>
      <g id="building02">
        <g>
          <rect class="cls-9" x="872.6" y="886.09" width="320" height="669.16"/>
          <g>
            <rect class="cls-10" x="940.6" y="972.95" width="184" height="141.64"/>
            <rect class="cls-10" x="940.6" y="1149.84" width="184" height="141.64"/>
            <rect class="cls-10" x="940.6" y="1326.74" width="184" height="141.64"/>
          </g>
        </g>
      </g>
      <g id="car05-6" data-name="car05">
        <polygon class="cls-3" points="1479.65 1586.94 1318.66 1586.94 1326.19 1536.23 1471.52 1536.23 1479.65 1586.94"/>
        <polygon class="cls-3" points="1455.34 1561.92 1342.97 1561.92 1367.16 1495.99 1431.57 1495.99 1455.34 1561.92"/>
        <polygon class="cls-4" points="1435.28 1538.04 1363.03 1538.04 1378.58 1507.76 1420 1507.76 1435.28 1538.04"/>
        <g>
          <circle class="cls-5" cx="1357.52" cy="1586.94" r="18.42"/>
          <circle class="cls-6" cx="1357.52" cy="1586.94" r="9.64"/>
        </g>
        <g>
          <circle class="cls-5" cx="1436.92" cy="1586.94" r="18.42"/>
          <circle class="cls-6" cx="1436.92" cy="1586.94" r="9.64"/>
        </g>
      </g>
      <g id="car04">
        <g>
          <polygon class="cls-3" points="1307.04 1832.44 1146.05 1832.44 1153.58 1781.73 1298.91 1781.73 1307.04 1832.44"/>
          <polygon class="cls-3" points="1282.73 1807.42 1170.36 1807.42 1194.55 1741.49 1258.96 1741.49 1282.73 1807.42"/>
          <polygon class="cls-4" points="1262.67 1783.54 1190.42 1783.54 1205.97 1753.26 1247.39 1753.26 1262.67 1783.54"/>
          <g>
            <circle class="cls-5" cx="1184.91" cy="1832.44" r="18.42"/>
            <circle class="cls-6" cx="1184.91" cy="1832.44" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="1264.31" cy="1832.44" r="18.42"/>
            <circle class="cls-6" cx="1264.31" cy="1832.44" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="car03">
        <g>
          <polygon class="cls-3" points="1007.15 1863.47 846.16 1863.47 853.69 1812.76 999.02 1812.76 1007.15 1863.47"/>
          <polygon class="cls-3" points="982.84 1838.45 870.47 1838.45 894.66 1772.52 959.07 1772.52 982.84 1838.45"/>
          <polygon class="cls-4" points="962.78 1814.57 890.53 1814.57 906.08 1784.29 947.5 1784.29 962.78 1814.57"/>
          <g>
            <circle class="cls-5" cx="885.02" cy="1863.47" r="18.42"/>
            <circle class="cls-6" cx="885.02" cy="1863.47" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="964.42" cy="1863.47" r="18.42"/>
            <circle class="cls-6" cx="964.42" cy="1863.47" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="building01">
        <g>
          <rect class="cls-9" x="1552.24" y="1254.07" width="320" height="669.16"/>
          <g>
            <rect class="cls-10" x="1620.24" y="1340.94" width="184" height="141.64"/>
            <rect class="cls-10" x="1620.24" y="1517.83" width="184" height="141.64"/>
            <rect class="cls-10" x="1620.24" y="1694.72" width="184" height="141.64"/>
          </g>
        </g>
      </g>
      <g id="car02">
        <g>
          <polygon class="cls-3" points="312.65 1412.42 151.66 1412.42 159.19 1361.71 304.52 1361.71 312.65 1412.42"/>
          <polygon class="cls-3" points="288.34 1387.4 175.97 1387.4 200.16 1321.47 264.58 1321.47 288.34 1387.4"/>
          <polygon class="cls-4" points="268.28 1363.52 196.03 1363.52 211.59 1333.24 253 1333.24 268.28 1363.52"/>
          <g>
            <circle class="cls-5" cx="190.52" cy="1412.42" r="18.42"/>
            <circle class="cls-6" cx="190.52" cy="1412.42" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="269.92" cy="1412.42" r="18.42"/>
            <circle class="cls-6" cx="269.92" cy="1412.42" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="car01">
        <g>
          <polygon class="cls-3" points="646.35 1675.79 485.36 1675.79 492.88 1625.07 638.22 1625.07 646.35 1675.79"/>
          <polygon class="cls-3" points="622.04 1650.77 509.67 1650.77 533.86 1584.83 598.27 1584.83 622.04 1650.77"/>
          <polygon class="cls-4" points="601.98 1626.88 529.73 1626.88 545.28 1596.61 586.7 1596.61 601.98 1626.88"/>
          <g>
            <circle class="cls-5" cx="524.22" cy="1675.79" r="18.42"/>
            <circle class="cls-6" cx="524.22" cy="1675.79" r="9.64"/>
          </g>
          <g>
            <circle class="cls-5" cx="603.62" cy="1675.79" r="18.42"/>
            <circle class="cls-6" cx="603.62" cy="1675.79" r="9.64"/>
          </g>
        </g>
      </g>
      <g id="house01">
        <g>
          <rect class="cls-7" x="131.14" y="1731.63" width="178.9" height="178.9"/>
          <polygon class="cls-8" points="67.84 1769.25 220.59 1616.5 373.34 1769.25 67.84 1769.25"/>
        </g>
      </g>
    </svg>
    
                  
        <!-- 以下js関連 --> 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
        <script src="assets/svgmove2.js" type="text/javascript"></script>
        
    </body>
</html>
@charset "UTF-8";

/* 共通部分
------------------------------- */
svg{
    width:300px;
    height: 300px;;
    text-align: center;
}
#car01{
    position: relative;
}
var xmlns="http://www.w3.org/2000/svg",
    select = function(s) {
        return document.querySelector(s);
    },
    selectAll = function(s) {
        return document.querySelectorAll(s);
    },
    road = select('#road'),        
    car15 = select('#car15'),
    car14 = select('#car14'),
    house05 = select('#house05'),
    house04 = select('#house04'),
    house03 = select('#house03'),
    car13 = select('#car13'),
    car12 = select('#car12'),
    car11 = select('#car11'),
    car10 = select('#car10'),
    car09 = select('#car09'),
    car08 = select('#car08'),
    car07 = select('#car07'),
    car06 = select('#car06'),
    building03 = select('#building03'),
    building02 = select('#building02'),
    car05 = select('#car05'),
    car04 = select('#car04'),
    car03 = select('#car03'),
    building01 = select('#building01'),
    car02 = select('#car02'),
    car01 = select('#car01'),
    house01 = select('#house01');

    //transformの基準点を中心にする
    TweenMax.set([road, car15, car14, house05, house04, house03, car13, car12, car10, car09, car08 ,car07 ,car06, building03, building02, car05, car04, car03, building01, car02 , car01, house01], {
        transformOrigin : '50% 50%'
    });
    
    //タイムライン1を作成する
    var timeline1 = new TimelineMax({repeat:0, delay:1, yoyo:false, paused:false});

    //家とビルが生えるアニメーション
    timeline1.from(road, 0.5, {
        scale: 0,
        ease: Power1.easeOut
    }),
    timeline1.fromTo(house01, 0.5, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '0.5'),
    timeline1.fromTo(house02, 0.5, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '0.75'),
    timeline1.fromTo(house03, 0.5, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '1'),
    timeline1.fromTo(house04, 0.5, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '1.25'),
    timeline1.fromTo(house05, 0.5, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '1.5'),
    timeline1.fromTo(building01, 1, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '2.5'),
    timeline1.fromTo(building02, 1, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '3'),
    timeline1.fromTo(building03, 1, 
        {scaleY: '0', transformOrigin: '50% 100%'},
        {scaleY: '1', ease: Bounce.easeOut},
        '3.5');
    
    //タイムライン2(車用)を作成する
    var timeline2 = new TimelineMax({repeat:-1, delay:3, yoyo:false, paused:false});

    //車が走るアニメーション
    timeline2.fromTo(car01, 5, 
        {x: '-400',y: -250},
        {x: '800',y:450},
        '2'),
    timeline2.fromTo(car02, 5, 
        {x: '800',y: 450},
        {x: '-400',y:-200},
        '3'),
    timeline2.fromTo(car10, 5, 
        {x: '-700',y: -400},
        {x: '600',y:325},
        '4'),
    timeline2.fromTo(car13, 5, 
        {x: '-400',y: -200},
        {x: '1100',y:575},
        '6'),
    timeline2.fromTo(car08, 5, 
        {x: '-1000',y: -550},
        {x: '300',y:175},
        '8'),
    timeline2.fromTo(car12, 5, 
        {x: '800',y: 425},
        {x: '-400',y:-225},
        '5'),
    timeline2.fromTo(car11, 5, 
        {x: '600',y: 330},
        {x: '-700',y:-350},
        '7'),
    timeline2.fromTo(car09, 5, 
        {x: '500',y: 250},
        {x: '-800',y:-400},
        '9'),
    timeline2.fromTo(car04, 5, 
        {x: '-1300',y: 800},
        {x: '700',y:-400},
        '1'),
    timeline2.fromTo(car03, 9, 
        {x: '600',y: -335},
        {x: '-2100',y:1185},
        '1'),
    timeline2.fromTo(car05, 9, 
        {x: '600',y: -335},
        {x: '-2100',y:1185},
        '5'),
    timeline2.fromTo(car07, 5, 
        {x: '-1400',y: 800},
        {x: '700',y:-400},
        '1'),
    timeline2.fromTo(car06, 9, 
        {x: '1150',y: -635},
        {x: '-1550',y:885},
        '2'),
    timeline2.fromTo(car14, 9, 
        {x: '600',y: -335},
        {x: '-2100',y:1185},
        '4'),
    timeline2.fromTo(car15, 9, 
        {x: '600',y: -335},
        {x: '-2100',y:1185},
        '7');
    
    
    
    
    
    
    

    
    

    
        
        
    
    
    


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.