How can I make this div block transition the same way as this website example

Question

I'm trying to find the CSS that makes the Div block underneath launch website animate on this website:https://district2.studio/project/dafi/ - but can't seem to replicate the animation

I find in the style sheet


                        Launch Website

But can't find anything else in the html or css that relates back to this div block and animates it.

I was expecting some kind of transition but can't seem to find it.

I am building my first website and wanted to try out using this kind of div block animation.


                        Launch Website

Whats expected is for the line to grow in width on mouse over, then mouse off it should grow from the middle and the 2 other lines should shrink to 0px in width

See the website launch website button for visual representation

user_8861913 · Answer

you should use javascript code for this effect. if you jquery library added in your project, use this code:

$(".mb-0").hover(
function() {
    var elWidth = $(this).width();
    $(".launch__icon .line.d-inline-block").css({"width" : elWidth, "transition": "width 0.4s ease-out"});
    $(".launch__icon .line.d-block").css({"width" : (elWidth/2), "opacity":"0"});
}, function() {
    $(".launch__icon .line.d-inline-block").css({"width" : "30px", "transition": "width 0.4s ease-out", "transition-delay": "0.01s"});
    $(".launch__icon .line.d-block").css({"width" : "0", "opacity":"1", "transition": "width 0.45s ease-out"});
});

and use below css:

.launch__icon {
width: 100%;
position: relative;
height: 2px;
text-align: center;
font-size: 0;
}

.launch__icon #line-primary {
display: inline-block;
width: 30px;
height: 2px;
background: #fff;
}

.launch__icon #line-left {
left: 0;
}

.launch__icon #line-left,
.launch__icon #line-right {
position: absolute;
width: 50%;
background: #fff;
height: 2px;
top: 0;
opacity: 0;
}


.launch__icon #line-right {
right: 0;
}

.mb-0,
.my-0 {
 margin-bottom: 0!important
}

.d-inline-block {
display: inline-block!important;
}

user_2065597 · Answer

They are using javascript, but you can use css for that, here is an illustration:

*{box-sizing: border-box}
/*
Since we want it to be centered i will use text-align center on the header which is just a wrapper
*/
header{
  text-align: center
}

/*because the children will be absolute, we need to set the anchor's position to relative*/
a{
  display: inline-block;
  position: relative;
  cursor: pointer;
}
 
.underline{
  position: absolute;
  bottom: 0;
  height: 2px;
  left: 50%;
  width: 100%;
  max-width: 32px;
  margin-left: -16px;
  background-color: black;
  will-change: left,width;
  /*We need an elastic ease here*/
  transition: all .2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
}
a:hover .underline{
  left: 0;
  margin-left: 0;
  max-width: 100%; 
  transition: all .2s ease;
}
a:before,
a:after{
  content: "";
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: black;
  will-change: width;
  transition: all .2s ease;
}
a:before{
  left: 0; 
}
a:after{
  right: 0;
}
a:hover:before,
a:hover:after{
  width: 50%;
  transition: all .2s .2s ease;
}


  
    Launch Website

How can I make this div block transition the same way as this website example

2 Answers