Help me to achieve this click animation

[midnightgamer 2 Likes (Newbie)]

I am trying to achieve this animation

 

I've a grid with 16 items, When I click any item of the grid I want to show a new row above the clicked item containing the row. I know this dose not have do anything with GSAP. But I can't figure out a way to do this.

Any help will be appreciated. Thanks in advance 

See the Pen KKxeLZm by midnightgamer (@midnightgamer) on CodePen

[demiava 5 Likes (Newbie)]

Check this MDN.

 

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
  // Create a new, plain <span> element
  let sp1 = document.createElement("span");

  // Get the reference element
  let sp2 = document.getElementById("childElement");
  // Get the parent element
  let parentDiv = sp2.parentNode;

  // Insert the new element into before sp2
  parentDiv.insertBefore(sp1, sp2);
</script>

 

[midnightgamer 2 Likes (Newbie)]

I tried this but the problem is I don't want to add another item or so, If users clicks on lets item in 2nd row I want to add a new row above 2nd row itself. 

[demiava 5 Likes (Newbie)]

It does exactly that. You just have to give that row the styles you want, like full width and height and additionally populate that row with the squares (also with JS).

 

Another way would be to create a dummy row with squares already populated and display: none;. Then, when any square is clicked, use  insertBefore() to insert that dummy row above the clicked row and at the same time set display: block;