Breaking News: Grepper is joining You.com. Read the official announcement!

how to apply grid size change transition

Sparkling Sloth answered on November 24, 2020 Popularity 8/10 Helpfulness 1/10

answer how to apply grid size change transition

how to apply grid size change transition

Comment

function changeGridTemplateColumns(pattern) {
  TweenMax.to(".container",
    1, {
      gridTemplateColumns: pattern
    }
  );
}

function changeGridTemplateRows(pattern) {
  TweenMax.to(".container",
    1, {
      gridTemplateRows: pattern
    }
  );
}

$(document).ready(
  function() {
    $(".el-a,.el-b,.el-c").mouseenter(
      function() {
        changeGridTemplateRows("2fr 1fr");
      }
    );
    $(".el-d,.el-e,.el-f").mouseenter(
      function() {
        changeGridTemplateRows("1fr 2fr");
      }
    );

    $(".el-a,.el-d").mouseenter(
      function() {
        changeGridTemplateColumns("2fr 1fr 1fr");
      }
    );

    $(".el-b,.el-e").mouseenter(
      function() {
        changeGridTemplateColumns("1fr 2fr 1fr");
      }
    );

    $(".el-c,.el-f").mouseenter(
      function() {
        changeGridTemplateColumns("1fr 1fr 2fr");
      }
    );

    $(".container").mouseleave(
      function() {
        changeGridTemplateColumns("1fr 1fr 1fr");
        changeGridTemplateRows("1fr 1fr");
      }
    );
  }
);

Popularity 8/10 Helpfulness 1/10 Language whatever

Source: stackoverflow.com

Tags: apply grid size transition whatever

Link to this answer
Share Copy Link

Contributed on Nov 24 2020

Sparkling Sloth

0 Answers Avg Quality 2/10

how to apply grid size change transition

Contents

More Related Answers

how to apply grid size change transition

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.