how to apply grid size change transition
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");
}
);
}
);