Is it possible to animate an SVG image within a div to grow to 80% screen height and move to the center of the parent div when a specific function is called? If so, how can this be achieved?
function openNav(){
$("#topnav").animate({height:'100%'})
$("#title").fadeOut()
//I want to add the image animation here
}
openNav();@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400&display=swap');
/* font-family: 'Hind', sans-serif; */
html, body {
height: 100%;
width: 100%;
margin: 0px;
background: rgb(229,239,243);
background: linear-gradient(0deg, rgba(229,239,243,1) 0%, rgba(181,232,255,1) 100%);
}
.topnav {
background-color: #2541B2;
border-bottom: 2px solid black;
overflow: hidden;
color: white;
padding: 5px 5px 2px 12px;
font-family: 'Hind', sans-serif;
font-weight: 400;
font-size: 30px;
}
#logo{
height: 40px;
float: left;
margin-right: 5px;
}<div id="topnav" class="topnav">
<img src="https://svgshare.com/i/ifn.svg" id="logo">
<span id="title">Website</span>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>