How to add entry splash screen with animated logo

[Harrisonthow]

Hi

I am new to this style of web development and after checking out greenelab.com, I really liked the opening animation on the homescreen which shows the logo. How would I implement this in my lab website?

[vincerubinetti]

You can add this fullscreen.html file to your _includes folder:
https://github.com/greenelab/greenelab.com/blob/main/_includes/fullscreen.html

and include it in your <header> like {% include fullscreen.html %} (see https://github.com/greenelab/greenelab.com/blob/bde6a4652c1562df7c718f647ae3680d91374f67/_includes/header.html).

Then you can add this CSS to your css/header.scss file:

header {
  // ...

  &[data-fullscreen] {
    transition: min-height $slow;
  }

  &[data-fullscreen="true"] {
    justify-content: center;
    min-height: 100vh;

    .logo {
      height: 200px;
      animation: fade_in 2s ease forwards;

      @keyframes fade_in {
        0% {
          opacity: 0;
          transform: scale(1.5);
        }
        100% {
          opacity: 1;
          transform: scale(1);
        }
      }
    }

    .nav_row {
      display: none;
    }
  }

  &[data-fullscreen="false"] {
    min-height: 0;
  }
}

(modified from https://github.com/greenelab/greenelab.com/blob/main/css/header.scss).

As for the more fancy animation of the logo itself, that's all done with SVG animations, which is beyond what I can help you with here.