Skip to content

Commit

Permalink
landing : added growing tree svg
Browse files Browse the repository at this point in the history 
Fixes: gitcoinco#1462
  • Loading branch information
Aditya Anand committed Jun 27, 2018
1 parent fe37798 commit 2b60684
Show file tree
Hide file tree
Showing 4 changed files with 303 additions and 6 deletions.
13 changes: 10 additions & 3 deletions app/assets/v2/css/landing_page.css
View file
Expand Up @@ -276,9 +276,16 @@ body {
display: none;
}

#gc-tree img {
max-width: 100%;
will-change: transform;
#gc-tree {
text-align: center;
}

#gc-tree #tree-svg .lines {
animation-play-state: paused;
}

#gc-tree #tree-svg .cls-4 {
animation-play-state: paused;
}

.pricing-tiers-container {
Expand Down
4 changes: 2 additions & 2 deletions app/assets/v2/js/landing_page.js
View file
Expand Up @@ -4,7 +4,6 @@ scrollContainer = $('#landing_page_wrapper');
$(document).ready(function() {
const $navbar = $('.navbar');
const $gcRobot = $('#gc-robot');
const $gcTree = $('#gc-tree');

const followStateHeight = 500;
let navFollowState = scrollContainer.scrollTop() > followStateHeight;
Expand All @@ -20,7 +19,8 @@ $(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').css('animation-play-state', 'running');
$('#gc-tree #tree-svg .cls-4').css('animation-play-state', 'running');
}));
moveBackground({});

Expand Down
2 changes: 1 addition & 1 deletion app/retail/templates/index.html
View file
Expand Up @@ -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>
Expand Down
290 changes: 290 additions & 0 deletions app/retail/templates/shared/tree.html
View file
@@ -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>

0 comments on commit 2b60684

Please sign in to comment.