<h1>Click Any Pill to Expand</h1>
<div class="wrapper">
<div class="expander">
<div class="close">X</div>
</div>
<div class="expander">
<div class="close">X</div>
</div>
<div class="expander">
<div class="close">X</div>
</div>
</div>
.expander {
width:50px;
height:40vh;
border-radius:25px;
background:black;
overflow:hidden;
margin-top:20px;
margin-left:20px;
}
html, body {
width:100%;
height:100%;
overflow:hidden;
margin:0;
}
.wrapper {
height:100%;
width:100%;
background:#1d1d1d;
display:flex;
align-items:center;
justify-content:center;
flex-direation:rows;
}
.close {
font-family:sans-serif;
font-size:18px;
line-height:40px;
transform:translate(155px, 5px);
background:rgba(255,255,255,0.6);
border-radius:20px;
height:40px;
width:40px;
text-align:center;
cursor:pointer;
box-shadow:1px 1px 4px #333;
}
h1 {
position:fixed;
text-align:center;
width:100%;
font-family:Kanit, sans-serif;
font-weight:400;
color:#ededed;
}
// learn all my GreenSock tricks at
// http://www.creativeCodingClub.com
// access the world's larest collection of premium GreenSock tutorials
let expanders = gsap.utils.toArray(".expander")
let active // keep track of which expander is open
expanders.forEach(function(expander, index){
let close = expander.querySelector(".close")
//create animation for each expander
let animation = gsap.timeline({paused:true})
animation.to(expander, {width:200, duration:0.4})
animation.from(close, {opacity:0, duration:0.1, scale:0.4, x:"-=10"}, "-=0.1")
//apply the timeline animation to an animation property on the expander
expander.animation = animation
expander.addEventListener("click", function() {
if(active) {
//close the active expander if there is one by reversing it
active.animation.reverse()
}
expander.animation.play()
active = expander
})
//close this expander by reversing the animation
close.addEventListener("click", function(event) {
event.stopPropagation()
expander.animation.reverse()
})
})
// learn all my GreenSock tricks at
// http://www.creativeCodingClub.com
// access the world's larest collection of premium GreenSock tutorials
gsap.set(".expander", {backgroundColor:gsap.utils.wrap(["#f5ce5b", "#c570b6", "#78d6e0"])})
This Pen doesn't use any external CSS resources.