CSS Grid fill animation on top of existing grid elements and take up full viewport

Question

Note: I'm looking for vanilla JS preferably, since jQuery isn't something I can use in this project

I have a somewhat complex grid structure:

body {
  margin: 0;
  height: 100vh;
  text-align: center;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "tl tr" "bl br";
}

.tl {
  background: #fdfdfd;
  color: #2f2f2f;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . . ." ". . text-tl ." ". . . button-tl";
  grid-area: tl;
}

.button-tl { 
  grid-area: button-tl;
  background: #2f2f2f;
  color: #fdfdfd;
}

.text-tl { 
  grid-area: text-tl;
}

.tr {
  background: #2f2f2f;
  color: #fdfdfd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . . ." ". text-tr . ." "button-tr . . .";
  grid-area: tr;
}

.button-tr { 
  grid-area: button-tr;
  background: #fdfdfd;
  color: #2f2f2f;
}

.text-tr { grid-area: text-tr; }

.br {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "button-br . . ." ". text-br . ." ". . . .";
  grid-area: br;
}

.button-br { 
  grid-area: button-br;
  background: #2f2f2f;
  color: #fdfdfd;
}

.text-br { grid-area: text-br; }

.bl {
  background: #2f2f2f;
  color: #fdfdfd;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . . button-bl" ". . text-bl ." ". . . .";
  grid-area: bl;
}

.button-bl { 
  grid-area: button-bl;
    background: #fdfdfd;
  color: #2f2f2f;

}

.text-bl { grid-area: text-bl; }

<div class="grid-container">
  <div class="tl">
    <div class="button-tl">button A</div>
    <div class="text-tl">word A</div>
  </div>
  <div class="tr">
    <div class="button-tr">button B</div>
    <div class="text-tr">word B</div>
  </div>
  <div class="br">
    <div class="button-br">button C</div>
    <div class="text-br">word C</div>
  </div>
  <div class="bl">
    <div class="button-bl">button D</div>
    <div class="text-bl">word D</div>
  </div>
</div>

I want to fire an animation when a user clicks one of those button elements using Anime.js, basically what amounts to a window blind or something similar to a window blind going from the top of the screen to the bottom.

This is the code, I'm sorry because I genuinely could not get this to work on sites like CodePen. The only thing you need here in your package.json is "dependencies": { "animejs":"^3.1.0"} if you want to see the animation I'm talking about.

import anime from '/node_modules/animejs/lib/anime.es.js';

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    anime({
      targets: '.animationBox',
      keyframes: [{
          height: "10%"
        },
        {
          height: "20%"
        },
        {
          height: "30%"
        },
        {
          height: "40%"
        },
        {
          height: "50%"
        },
        {
          height: "60%"
        },
        {
          height: "70%"
        },
        {
          height: "80%"
        },
        {
          height: "90%"
        },
        {
          height: "100%"
        }
      ],
      duration: 2000,
      easing: 'linear'
    });
  }, 500);
});

body {
  margin: 0;
  background: #241B2F;
  height: 100vh;
}

#App {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 100%;
}

#hiddenBox {
  height: 100%;
  width: 100%;
}

.animationBox {
  background: white;
  height: 0%;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="index.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  <title>Anime.js</title>
</head>

<body>
  <div id="App">
    <div id="hiddenBox">
      <div class="animationBox"></div>
    </div>
  </div>
</body>
<script type="module" src="index.js"></script>

</html>

I want to have that white 'window blind' scroll down on top of the all the other elements on the page, but I don't know how to structure my HTML/CSS to avoid breaking the entire layout. I've tried:

z-index, which didn't seem to accomplish anything, presumably because z-index requires position:relative or position:absolute, which also breaks the grid
display: none and other variations like visibility: hidden, but these didn't work either and still caused the structure to get messed up
putting the animated white div off the screen and placing it using a function that gets triggered onClick()

I guess a TL;DR is: How do I overlay a div on top of a grid without breaking anything in the grid layout? Basically, this image: enter image description here

dashb · Accepted Answer

You can add a div to the end of your site's HTML, just before the closing tag with the following CSS.

<div id="divname" style="
  background-color:white;
  position: fixed;
  top: 0px;
  right: 0px;
  height: 0;
  width: 100vw;">
</div>

That should create an overlay div that you can QuerySelect in JS to animate.

CSS Grid fill animation on top of existing grid elements and take up full viewport

Tags:

javascript

html

css

css-grid

anime.js

Sensanaty

1 Answers

dashb

Recent Activity

Donate For Us

CSS Grid fill animation on top of existing grid elements and take up full viewport

Tags:

javascript

html

css

css-grid

anime.js

Sensanaty

1 Answers

dashb

Related questions

Recent Activity

Donate For Us