function modal(){
TweenMax.to(".modal", 1, {left:1, ease:Power4.easeOut});
}
function hide(){
TweenMax.to(".modal", 1, {right:2000, ease:Power4.easeOut});
}html, body{
margin: 0;
padding: 0;
width: inherit;
height: 100%
}
.container{
width: 100%;
height: 100%;
background-color: dimgrey;
z-index: -1;
}
.modal{
width: 95%;
height: 100%;
position: absolute;
background-color: green;
z-index: 2;
right: 100%;
}
#modalPop{
font-family: monospace;
}
.btn{
width: 10%;
height: 10%;
position: absolute;
border: 1px solid red;
margin-left: 20%;
margin-top: 20px;
z-index: 1;
}
.close {
color: #aaaaaa;
float: right;
font-size: 15px;
font-weight: bold;
margin-right: 20px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="main.js" ></script>
<title>Modal</title>
</head>
<body>
<div class="container">
<div id="modalPop" class="modal">
<h1>THIS IS A MODAL</h1>
<span class="close" onclick="hide()">close</span>
</div>
<div class="btn">
<button onClick="modal()">CLICK ME</button>
</div>
</div>
</body>
</html>***> Hi, can you help me, I am trying to make my modal move to the right when the close is clicked
use percentage to animate