Jump to content
Search Community

Help me to achieve this click animation

midnightgamer test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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;

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...