Nah nevermind I already got my closest solution.
gsap.registerPlugin(ScrollTrigger)
const circle = document.querySelector('.maskingCircle')
const tl = gsap.timeline({})
tl.to(circle,{
y:"-100%",
left:"0%",
width:"100%",
height:"100%",
ease:Expo.easeOut,
borderRadius:"0%",
duration:1,
})
const button = document.querySelector('button')
button.addEventListener("click",() => {
tl.to(circle,{
y:"-200%",
width:"200%",
height:"200%",
left:"-50%",
ease:Expo.easeIn,
borderRadius:"100%",
duration:1,
})
})
<div class="container">
<div class="maskingCircle"></div>
<button type="button">
CLICK
</button>
</div>
* {
margin: 0;padding: 0;
}
body {
position: relative;
width: 100%;
height: 100vh;
/* background: orange;overflow: hidden; */
}
.container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: orange;overflow: hidden;
position: relative;
}
.maskingCircle {
width: 200%;
height: 200%;
border-radius: 100%;
background: #0002ff;
position: absolute;
top: 100%;
left: -50%;
}
button {
width: 300px;
height: 100px;
background: #ffbbbf;
color: black;
position: absolute;
}