[Website Feature]: Implement animated logo

[ssandino]

Is there an existing request for this feature?

• I have searched the existing issues

Is your feature request related to a problem? Please describe.

We currently use a static text logo on the top left of the website instead of the animated text logo.

Social Income Logo Animation.json (Lottie Export)

You can preview the animation by uploading the json file (above) to this site.

Describe the solution/feature

Adding the animated logo – this requires to use Lottie React Player. A good start is these articles: The easiest way to handle animations In React/Nextjs and How To Use Lottie Animations in a React App

The mobile view with the icon logo should not be changed.

Describe alternatives you've considered

No response

Criteria for Completion

No response

Anything else?

No response

Code of Conduct

• I've read the Code of Conduct and understand my responsibilities as a member of the Social Income community

[MoarCoding]

I'd like to work on this

[ssandino]

Great @MoarCoding – thanks for your coding contribution!

[MoarCoding]

@ssandino Hi again. The linked lottie has a lot of vertical whitespace. I also feel that the left side should always be aligned with the left side of the main content which it only does at animation end. Would you like me to make a PR for including the lottie and then you can adjust said lottie the way you see fit before merging into main?

[ssandino]

@ssandino Hi again. The linked lottie has a lot of vertical whitespace. I also feel that the left side should always be aligned with the left side of the main content which it only does at animation end. Would you like me to make a PR for including the lottie and then you can adjust said lottie the way you see fit before merging into main?

Good point. Thanks for thinking along. Yes a first PR without the perfect animation makes surely sense, hence, the code review can take place and we exchange the Lottie file later.

@RaphaelSchoen1 could you send me the original AF file? Then we could do a first version in which we cut all possible whitespace (that should already look alright) and upon do a new version, in which the animation only extends to the right.

[MoarCoding]

@ssandino PR up

[RaphaelSchoen1]

@MoarCoding @ssandino this lottie file should be better. I cropped the file and almost completely eliminated the horizontal and vertical white space. If you need anything else let me know.

Soical Income Logo Animation_2.json.zip