landing : added growing tree svg (gitcoinco#1555)

Fixes: gitcoinco#1462
thelostone-mc · Jun 28, 2018 · be6077b · be6077b
1 parent 57a4b58
commit be6077b
Show file tree

Hide file tree

Showing 4 changed files with 312 additions and 6 deletions.
diff --git a/app/assets/v2/css/landing_page.css b/app/assets/v2/css/landing_page.css
@@ -276,9 +276,21 @@ body {
   display: none;
 }
 
-#gc-tree img {
-  max-width: 100%;
-  will-change: transform;
+#gc-tree {
+  text-align: center;
+}
+
+#gc-tree .lines {
+  animation-play-state: running;
+}
+
+#gc-tree .cls-4 {
+  animation-play-state: running;
+}
+
+.pause-animation {
+  animation-play-state: paused !important;
+  -webkit-animation-play-state: paused !important;
 }
 
 .pricing-tiers-container {

diff --git a/app/assets/v2/js/landing_page.js b/app/assets/v2/js/landing_page.js
@@ -2,9 +2,11 @@ scrollContainer = $('#landing_page_wrapper');
 
 // Header and Nav
 $(document).ready(function() {
+  $('#gc-tree #tree-svg .lines').addClass('pause-animation');
+  $('#gc-tree #tree-svg .cls-4').addClass('pause-animation');
+
   const $navbar = $('.navbar');
   const $gcRobot = $('#gc-robot');
-  const $gcTree = $('#gc-tree');
 
   const followStateHeight = 500;
   let navFollowState = scrollContainer.scrollTop() > followStateHeight;
@@ -20,7 +22,9 @@ $(document).ready(function() {
       navFollowState = false;
     }
     $gcRobot.css('transform', `translateY(${$gcRobot.parent()[0].getBoundingClientRect().top - 100}px)`);
-    $gcTree.css('transform', `translateY(${$gcTree.parent()[0].getBoundingClientRect().top / 2 - 50}px)`);
+    $('#gc-tree #tree-svg .lines').removeClass('pause-animation');
+    $('#gc-tree #tree-svg .cls-4').removeClass('pause-animation');
+
   }));
   moveBackground({});
 

diff --git a/app/retail/templates/index.html b/app/retail/templates/index.html
@@ -154,7 +154,7 @@ <h4 class="font-title-lg">{% trans "Grow Your Open Source Community" %}</h4>
 
       <div class="container-fluid p-5 tree_container white-bg">
         <div id="gc-tree">
-          <img src="{% static "v2/images/gc-tree.png" %}" alt="Gitcoin Tree" />
+          {% include 'shared/tree.html' %}
           <h2 class="mt-4">Grow Open Source</h2>
         </div>
       </div>

diff --git a/app/retail/templates/shared/tree.html b/app/retail/templates/shared/tree.html
@@ -0,0 +1,290 @@
+<style>
+  #tree-svg svg {
+    width: 100%;
+    max-width: 400px;
+  }
+
+  #tree-svg {
+    text-align: center;
+  }
+
+  .cls-1,
+  .cls-2,
+  .cls-3 {
+    fill: none;
+    stroke-linecap: round;
+    stroke-miterlimit: 10;
+    stroke-width: 7px;
+  }
+
+  .cls-1,
+  .cls-2 {
+    stroke: #160644;
+  }
+
+  .cls-3 {
+    stroke: #22e595;
+  }
+
+  .cls-4 {
+    fill: #24e899;
+  }
+
+  .lines {
+    animation: offset 1s ease-in forwards;
+  }
+
+  #Layer_1 {
+    stroke-dasharray: 20px;
+    stroke-dashoffset: 20px;
+  }
+
+  #Layer_2 {
+    stroke-dasharray: 140px;
+    stroke-dashoffset: 140px;
+    animation-delay: 0.75s;
+  }
+
+  #Layer_4 {
+    stroke-dasharray: 420px;
+    stroke-dashoffset: 420px;
+    animation-delay: 1.25s;
+  }
+
+  #Layer_5 {
+    stroke-dasharray: 220px;
+    stroke-dashoffset: 220px;
+    animation-delay: 1.75s;
+  }
+
+  #Layer_6 {
+    stroke-dasharray: 220px;
+    stroke-dashoffset: 220px;
+    animation-delay: 2.25s;
+  }
+
+  #Layer_7 {
+    stroke-dasharray: 220px;
+    stroke-dashoffset: 220px;
+    animation-delay: 2.75s;
+  } 
+
+  #Layer_8 {
+    stroke-dasharray: 220px;
+    stroke-dashoffset: 220px;
+    animation-delay: 3.25s;
+  } 
+  #Layer_9 {
+    stroke-dasharray: 220px;
+    stroke-dashoffset: 220px;
+    animation-delay: 3.75s;
+  } 
+
+  #Layer_10 {
+    stroke-dasharray: 220px;
+    stroke-dashoffset: 220px;
+    animation-delay: 4.25s;
+  }
+
+  #Layer_11 {
+    stroke-dasharray: 220px;
+    stroke-dashoffset: 220px;
+    animation-delay: 4.75s;
+  }
+
+  .cls-4 {
+    animation: resize 1s ease-in 5.25s forwards;
+    r: 0;
+  }
+
+  @keyframes resize {
+    to {
+      r: 9.33;
+    }
+  }
+
+  @keyframes offset {
+    to {
+      stroke-dashoffset: 0px;
+    }
+  }
+</style>
+
+<div id="tree-svg">
+  <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax meet">
+    <g id="Layer_2" class="lines" data-name="Layer 2">
+      <line class="cls-1" x1="237.06" y1="576.1" x2="300.64" y2="512.54" />
+      <line class="cls-1" x1="364.27" y1="576.11" x2="236.83" y2="576.14" />
+      <line class="cls-1" x2="300.66" y2="512.54" x1="364.33" y1="576.14" />
+      <line class="cls-1" x1="302.83" y1="575.22" x2="302.83" y2="518.39" />
+      <line class="cls-2" x1="303.5" y1="549.72" x2="336.17" y2="549.72" />
+      <line class="cls-2" x1="303.25" y1="564.06" x2="350.67" y2="564.06" />
+      <line class="cls-2" x1="302.17" y1="556.89" x2="259.5" y2="556.89" />
+      <line class="cls-2" x1="301.83" y1="542.89" x2="272" y2="542.89" />
+    </g>
+    <g id="Layer_4" class="lines" data-name="Layer 4">
+      <line class="cls-2" x1="302.5" y1="517.14" x2="302.5" y2="413.64" />
+      <polyline class="cls-2" points="315 524.89 315 293.39 308.5 293.39 308.5 152.89" />
+      <polyline class="cls-2" points="328 538.89 328 414.39 412 414.39" />
+      <line class="cls-2" x1="290" y1="523.39" x2="290" y2="413.39" />
+      <polyline class="cls-2" points="275.5 537.89 275.5 402.89 290.5 402.89 290.5 357.39" />
+      <line class="cls-2" x1="315.67" y1="375.39" x2="338.33" y2="375.39" />
+    </g>
+    <g id="Layer_5" class="lines" data-name="Layer 6">
+      <line class="cls-2" x1="365.33" y1="414.39" x2="365.33" y2="437.06" />
+      <line class="cls-2" x1="275" y1="422.39" x2="243.33" y2="422.39" />
+      <line class="cls-2" x1="282.67" y1="402.39" x2="282.67" y2="338.06" />
+      <polyline class="cls-2" points="315 293.39 326 293.39 393.83 225.56" />
+      <line class="cls-2" x1="308.67" y1="223.39" x2="385.5" y2="146.56" />
+      <line class="cls-2" x1="342" y1="414.39" x2="342" y2="311.72" />
+      <line class="cls-2" x1="314.5" y1="336.89" x2="301.5" y2="336.89" />
+    </g>
+    <g id="Layer_6" class="lines" data-name="Layer 5">
+      <line class="cls-2" x1="258" y1="422.39" x2="258" y2="398.89" />
+      <line class="cls-2" x1="367" y1="427.39" x2="439" y2="427.39" />
+      <line class="cls-2" x1="342" y1="397.39" x2="407" y2="332.39" />
+      <line class="cls-2" x1="342.5" y1="344.89" x2="405" y2="282.39" />
+      <polyline class="cls-2" points="283 345.89 292 345.89 292 180.39" />
+      <line class="cls-2" x1="281.5" y1="380.39" x2="184.5" y2="283.39" />
+      <line class="cls-2" x1="336" y1="192.39" x2="336" y2="158.39" />
+      <line class="cls-2" x1="325.5" y1="206.89" x2="345.75" y2="227.14" />
+    </g>
+    <g id="Layer_7" class="lines" data-name="Layer 7">
+      <line class="cls-2" x1="290.67" y1="290.72" x2="264" y2="290.72" />
+      <line class="cls-2" x1="242.67" y1="340.72" x2="242.67" y2="264.06" />
+      <line class="cls-2" x1="258.67" y1="361.39" x2="167.33" y2="361.39" />
+      <line class="cls-2" x1="227.33" y1="328.72" x2="199.33" y2="328.72" />
+      <line class="cls-2" x1="326" y1="374.06" x2="326" y2="276.72" />
+      <line class="cls-2" x1="363.33" y1="256.72" x2="389.33" y2="256.72" />
+      <line class="cls-2" x1="336.67" y1="217.39" x2="379.33" y2="217.39" />
+      <line class="cls-2" x1="368.67" y1="163.39" x2="398.33" y2="193.06" />
+      <line class="cls-2" x1="336.67" y1="166.06" x2="359.33" y2="143.39" />
+      <line class="cls-2" x1="390.67" y1="300.72" x2="408.33" y2="318.39" />
+      <line class="cls-2" x1="390.67" y1="350.72" x2="472.67" y2="350.72" />
+      <line class="cls-2" x1="257.33" y1="409.39" x2="218" y2="409.39" />
+      <polyline class="cls-2" points="291.33 197.39 247.33 153.39 188.67 153.39" />
+      <line class="cls-2" x1="196.67" y1="299.39" x2="118.67" y2="299.39" />
+      <line class="cls-2" x1="284" y1="167.39" x2="225.67" y2="109.06" />
+      <line class="cls-2" x1="382" y1="236.72" x2="450.25" y2="236.72" />
+    </g>
+    <g id="Layer_8" class="lines" data-name="Layer 8">
+      <polyline class="cls-2" points="216 290.72 241.33 290.72 273 259.06" />
+      <line class="cls-2" x1="171.33" y1="302.06" x2="115" y2="358.39" />
+      <line class="cls-2" x1="140.67" y1="298.06" x2="140.67" y2="269.39" />
+      <line class="cls-2" x1="200.67" y1="364.06" x2="157.33" y2="407.39" />
+      <polyline class="cls-2" points="233.33 362.72 233.33 410.06 207.33 436.06 147 436.06" />
+      <line class="cls-2" x1="274.67" y1="289.39" x2="274.67" y2="268.06" />
+      <line class="cls-2" x1="347.33" y1="151.39" x2="347.33" y2="113.39" />
+      <line class="cls-2" x1="384" y1="177.39" x2="489.33" y2="177.39" />
+      <line class="cls-2" x1="401.25" y1="308.14" x2="427.67" y2="281.72" />
+      <line class="cls-2" x1="407.33" y1="353.39" x2="407.33" y2="397.39" />
+      <line class="cls-2" x1="430" y1="352.06" x2="462" y2="384.06" />
+      <line class="cls-2" x1="434.67" y1="218.72" x2="475.33" y2="259.39" />
+      <line class="cls-2" x1="276.67" y1="157.39" x2="276.67" y2="78.06" />
+      <line class="cls-2" x1="194" y1="152.14" x2="194" y2="112.06" />
+    </g>
+    <g id="Layer_9" class="lines" data-name="Layer 9">
+      <line class="cls-2" x1="179" y1="385.39" x2="44.33" y2="385.39" />
+      <line class="cls-2" x1="140" y1="281.72" x2="75.33" y2="281.72" />
+      <line class="cls-2" x1="193.67" y1="135.39" x2="105.33" y2="135.39" />
+      <line class="cls-2" x1="346" y1="130.06" x2="409.83" y2="66.22" />
+      <line class="cls-2" x1="428" y1="176.72" x2="428" y2="109.39" />
+      <line class="cls-2" x1="413" y1="297.06" x2="506.33" y2="297.06" />
+      <line class="cls-2" x1="437.33" y1="220.72" x2="490.67" y2="220.72" />
+      <line class="cls-2" x1="448.67" y1="370.72" x2="508.67" y2="370.72" />
+      <line class="cls-2" x1="229.33" y1="290.06" x2="135.67" y2="196.39" />
+      <line class="cls-2" x1="121.33" y1="350.72" x2="56" y2="350.72" />
+      <line class="cls-2" x1="149.33" y1="320.72" x2="46" y2="320.72" />
+      <line class="cls-2" x1="167.33" y1="399.39" x2="199" y2="431.06" />
+      <line class="cls-2" x1="275.46" y1="121.18" x2="221.83" y2="67.56" />
+      <line class="cls-2" x1="277" y1="102.39" x2="308.67" y2="102.39" />
+    </g>
+    <g id="Layer_10" class="lines" data-name="Layer 10">
+      <line class="cls-2" x1="158" y1="219.39" x2="123" y2="254.39" />
+      <line class="cls-2" x1="445.79" y1="294.93" x2="506.67" y2="234.06" />
+      <polyline class="cls-2" points="462 218.06 488.67 191.39 547.33 191.39" />
+      <polyline class="cls-2" points="428.67 136.06 444 151.39 506 151.39" />
+      <line class="cls-2" x1="429.5" y1="124.06" x2="476" y2="124.06" />
+      <line class="cls-2" x1="380.71" y1="97.43" x2="400" y2="116.72" />
+      <line class="cls-2" x1="294.67" y1="102.06" x2="335.67" y2="61.06" />
+      <line class="cls-2" x1="182.67" y1="242.72" x2="247" y2="178.39" />
+      <line class="cls-2" x1="142" y1="202.72" x2="167.67" y2="177.06" />
+      <line class="cls-2" x1="90" y1="281.39" x2="90" y2="260.72" />
+      <polyline class="cls-2" points="74.67 319.39 45.33 290.06 19.33 290.06" />
+      <line class="cls-2" x1="102.67" y1="384.72" x2="83.33" y2="365.39" />
+      <polyline class="cls-2" points="128 385.39 128 414.72 78.67 414.72" />
+      <polyline class="cls-2" points="482.63 371.35 506.67 395.39 561.33 395.39" />
+      <line class="cls-2" x1="456.67" y1="296.72" x2="497.33" y2="337.39" />
+      <line class="cls-2" x1="488.5" y1="252.72" x2="530" y2="252.72" />
+      <line class="cls-2" x1="244" y1="88.72" x2="244" y2="47.39" />
+      <line class="cls-2" x1="137.33" y1="134.72" x2="137.33" y2="88.06" />
+      <polyline class="cls-2" points="166.29 136.43 145.33 157.39 58.67 157.39" />
+      <line class="cls-2" x1="138" y1="238.06" x2="57.33" y2="238.06" />
+    </g>
+    <g id="Layer_11" class="lines" data-name="Layer 11">
+      <polyline class="cls-2" points="307.33 88.06 292.67 73.39 292.67 18.72" />
+      <line class="cls-2" x1="322.5" y1="76.72" x2="365.33" y2="76.72" />
+      <line class="cls-2" x1="398.67" y1="77.39" x2="361.67" y2="40.39" />
+      <line class="cls-2" x1="451.33" y1="120.72" x2="451.33" y2="73.39" />
+      <polyline class="cls-2" points="481.33 151.39 499.67 133.06 531.33 133.06" />
+      <polyline class="cls-2" points="475.33 314.72 525.33 314.72 550.67 314.72" />
+      <polyline class="cls-2" points="528 316.06 528 343.39 572 343.39" />
+      <polyline class="cls-2" points="489.33 378.72 457.33 410.72 508.67 410.72" />
+      <line class="cls-2" x1="88" y1="368.72" x2="21.33" y2="368.72" />
+      <line class="cls-2" x1="90" y1="265.39" x2="21.33" y2="265.39" />
+      <polyline class="cls-2" points="112.67 236.72 98 222.06 58.67 222.06" />
+      <line class="cls-2" x1="168" y1="178.72" x2="90.67" y2="178.72" />
+      <polyline class="cls-2" points="138.67 110.06 164 110.06 164 66.72" />
+      <polyline class="cls-2" points="166.33 84.72 175.33 84.72 224.33 35.72" />
+      <polyline class="cls-2" points="244.67 60.06 260.67 60.06 276.67 60.06" />
+      <line class="cls-2" x1="260.67" y1="55.39" x2="261.33" y2="16.06" />
+      <line class="cls-2" x1="228.67" y1="201.39" x2="246" y2="218.72" />
+      <line class="cls-2" x1="209.33" y1="214.72" x2="189.33" y2="194.72" />
+      <line class="cls-2" x1="392" y1="106.72" x2="432.67" y2="66.06" />
+      <line class="cls-2" x1="194.67" y1="58.06" x2="183" y2="46.39" />
+    </g>
+    <g id="Layer_1" class="lines" data-name="Layer 1">
+      <line class="cls-3" x1="240" y1="589.63" x2="240" y2="578.49" />
+      <line class="cls-3" x1="254.88" y1="589.63" x2="254.88" y2="578.49" />
+      <line class="cls-3" x1="269.88" y1="589.63" x2="269.88" y2="578.49" />
+      <line class="cls-3" x1="284.75" y1="589.63" x2="284.75" y2="578.49" />
+      <line class="cls-3" x1="299.5" y1="589.63" x2="299.5" y2="578.49" />
+      <line class="cls-3" x1="314.38" y1="589.63" x2="314.38" y2="578.49" />
+      <line class="cls-3" x1="329.38" y1="589.63" x2="329.38" y2="578.49" />
+      <line class="cls-3" x1="344.25" y1="589.63" x2="344.25" y2="578.49" />
+      <line class="cls-3" x1="359" y1="589.63" x2="359" y2="578.49" />
+    </g>
+    <g id="Layer_12"  data-name="Layer 12">
+      <circle class="cls-4" cx="79.25" cy="413.56" r="9.33" />
+      <circle class="cls-4" cx="148.5" cy="440.31" r="9.33" />
+      <circle class="cls-4" cx="139.25" cy="241.06" r="9.33" />
+      <circle class="cls-4" cx="163.75" cy="359.56" r="9.33" />
+      <circle class="cls-4" cx="89.75" cy="265.56" r="9.33" />
+      <circle class="cls-4" cx="87.5" cy="178.31" r="9.33" />
+      <circle class="cls-4" cx="169" cy="178.06" r="9.33" />
+      <circle class="cls-4" cx="244.25" cy="258.06" r="9.33" />
+      <circle class="cls-4" cx="247.5" cy="219.06" r="9.33" />
+      <circle class="cls-4" cx="290.25" cy="196.31" r="9.33" />
+      <circle class="cls-4" cx="104.25" cy="137.06" r="9.33" />
+      <circle class="cls-4" cx="63.75" cy="156.56" r="9.33" />
+      <circle class="cls-4" cx="163.5" cy="63.06" r="9.33" />
+      <circle class="cls-4" cx="224.75" cy="35.06" r="9.33" />
+      <circle class="cls-4" cx="221.75" cy="69.06" r="9.33" />
+      <circle class="cls-4" cx="296.5" cy="15.31" r="9.33" />
+      <circle class="cls-4" cx="366.25" cy="79.56" r="9.33" />
+      <circle class="cls-4" cx="364.75" cy="43.81" r="9.33" />
+      <circle class="cls-4" cx="345.25" cy="127.81" r="9.33" />
+      <circle class="cls-4" cx="401" cy="195.56" r="9.33" />
+      <circle class="cls-4" cx="450.75" cy="70.56" r="9.33" />
+      <circle class="cls-4" cx="499.75" cy="132.81" r="9.33" />
+      <circle class="cls-4" cx="390.75" cy="258.67" r="9.33" />
+      <circle class="cls-4" cx="547.6" cy="192.68" r="9.33" />
+      <circle class="cls-4" cx="529.6" cy="256.68" r="9.33" />
+      <circle class="cls-4" cx="573.1" cy="344.18" r="9.33" />
+      <circle class="cls-4" cx="558.1" cy="392.68" r="9.33" />
+      <circle class="cls-4" cx="440.6" cy="426.18" r="9.33" />
+      <circle class="cls-4" cx="193.5" cy="114.31" r="9.33" />
+      <circle class="cls-4" cx="87.75" cy="366.81" r="9.33" />
+    </g>
+  </svg>
+</div>