I want to expand the div on click. An idea is for the div to start expanding until its full-page height and width starting from the position of the div before it starts expanding.
I know I didn't explain that to you clearly but I hope my current code will help you understand.
I want to the div to expand from its current position to fill the full page. It almost works but it works from the position I set in the animation.
Do you have any idea how can I receive the div's current position in Javascript and set that value as animation's starting point?
$(document).ready(function() {
$('.about').click(function() {
$('.about').addClass('active');
$('.about').removeClass('border');
})
$('.projects').click(function() {
$('.projects').addClass('active');
$('.projects').removeClass('border');
})
}).hero {
position: relative;
width: 100%;
height: calc(100vh - 150px);
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1.5em;
}
.border {
border-radius: 15px;
border: 1px solid #000;
cursor: pointer;
}
.about {
grid-row: 1/2;
background-color: chocolate;
}
.projects {
grid-row: 1/3;
grid-column: 2/3;
background-color: cyan;
}
#grid-split {
grid-row: 2/3;
grid-column: 1/2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5em;
}
@keyframes expand {
0% {
width: 0vw;
height: 0vh;
top: 20%;
left: 20%;
}
100% {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
}
}
.about.active {
position: fixed;
top: 0;
left: 0;
z-index: 100;
animation: expand .5s ease-in;
width: 100vw;
height: 100vh;
}
.projects.active {
position: fixed;
top: 0;
left: 0;
z-index: 100;
animation: expand .5s ease-in;
width: 100vw;
height: 100vh;
}<div class="hero">
<div class="about border"></div>
<div class="projects border"></div>
<div id="grid-split">
<div class="contact border"></div>
<div class="process border"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>