Add fade in animation styling to landing page

[Syntaf]

Note: This is a great first issue if you're looking to contribute to WRP! Feel free to reach out to me or comment on this issue if you'd like to work on this, I am available to help you get started or answer any questions.

Problem

When visiting the landing page, scrolling down too fast will show you an empty section before the graph is able to load and render. In older versions of the site I had a fade-in animation that helped tie the initially empty page in when a fade-in of the graph and title:

Screen.Recording.2024-10-05.at.9.54.22.AM.mov

Since moving the site to run on a webpack frontend stack, I had to drop the old animation library I once used because it was 6+ years outdated and no longer working properly. It'd be great to have these animations back on the page to give a better UX when scrolling down.

Acceptance Criteria:

• As a user, when I scroll down below the landing page I should see all content fade in, vertically, bottom-up.
• As a user, when on mobile, when I scroll down below the landing page I should see all content fade in, vertically, bottom-up.