Web: As a user, I want a beautiful svg animation for the Gitcoin Tree as I scroll down the landing page, so I can be enamoured with the mission to grow Open Source

[owocki]

User Story

As a user, I want a beautiful svg animation for the Gitcoin Tree as I scroll down the landing page, so I can be enamoured with the mission to grow Open Source

screenshot of the tree

Link to landing page: https://gitcoin.co/

Why Is this Needed?

The mission is important. The reason Gitcoin exists is the mission.

The current tree is kind of bland, and we want people to be engaged with the tree as they scroll through the tree!

Some svg animation inspiration: https://twitter.com/owocki

Description

Type:
Feature

Current Behavior

Bland Tree

Expected Behavior

Beautiful SVG Tree with animated branches and leaves.

Bounty

Please only apply for this bounty if you can deliver in the next week or week and a half and actually follow through. Please put a link to any relevant experiernce / your portfolio in your application.

[owocki]

cc @PixelantDesign -- im going to bounty this so the core team isnt spending cycles learning this new skillset

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 110.0 DAI (110.0 USD @ $1.0/DAI) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $25,294.09 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work has been started__.

These users each claimed they can complete the work by 8 months, 2 weeks ago.
Please review their action plans below:

1) justpixel has been approved to start work.

You can see my work on my gitcoin profile https://gitcoin.co/profile/justpixel

Learn more on the Gitcoin Issue Details page.

[justpixel]

@PixelantDesign @owocki Here is a codepen https://codepen.io/justpixel/full/vregXo
Please tell me if you want to make any tweaks on this.

[thelostone-mc]

@justpixel Oh this is nice :D

Noob question : For these , do you custom write the svg by hand / generate it using sketch + add relevant class and ID + add css on top of it ?

I've been trying my hand at stuff like this during my spare time and I usually end up writing the svg by hand (takes a lot of time 😅 )

[justpixel]

@thelostone-mc Yes, I've built the svg on layers in Illustrator and then write the animation by hand. I think there are other tools like https://www.svgator.com/ to help you but for this case it seems easier to do it like this.

[vs77bb]

@justpixel this is awesome!

[PixelantDesign]

@justpixel looks great!!!! Can't wait to see it on the site! No changes from me! Love it!

[owocki]

i love it! @thelostone-mc / @SaptakS is it an easy lift for you to put on the landing page? if not, i can bounty it

[owocki]

@justpixel can you submit your work on gitcoin pls?

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work for 110.0 DAI (110.0 USD @ $1.0/DAI) has been submitted by__:

1. @justpixel

@owocki please take a look at the submitted work:

• PR by @justpixel

---

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
  $27,236.27 more funded OSS Work available on the Gitcoin Issue Explorer

[thelostone-mc]

I can get to it a lil later unless @SaptakS can get it done before

[owocki]

great thanks @thelostone-mc

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 110.0 DAI (110.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @justpixel.__

• Learn more at on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $27,371.14 more funded OSS Work available on the Gitcoin Issue Explorer

[owocki]

@justpixel would you have any interest in doing some work on making the tree animate when you click on it (or otherwise, having some recurring animation after the tree fully grows)