Как создать hover эффект кнопок сайта animejs

#javascript #css #svg #canvas

Зашел случайно на сайт animejs 

Очень понравились hover эффект их основных кнопок везде искал но подобного эффекта
не нашел даже у них на сайте подобного нету 



.btn {
    width:100px;
    height:40px;
    
    text-align:center;
    padding:5px;
    line-height:2.3;
    border:1px solid red;
}
button




До эффекта

После

    

Ответы

Ответ 1

Вроде похоже. 



let up = document.getElementById("up"),
  down = document.getElementById("down"),
  hoverBlock = document.getElementById("hover-block");

hoverBlock.addEventListener("mouseenter", function(e) {
  up.beginElement();
  console.log
});
hoverBlock.addEventListener("mouseout", function(e) {
  down.beginElement();
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #222;
}

#wrap {
  position: relative;
  width: 220px;
  height: 70px;
  background: transparent;
}

#hover-block {
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: 20px;
  left: 20px;
  width: 180px;
  height: 30px;
  z-index: 1111;
}

p {
  position: absolute;
  width: 100%;
  height: 100%;
  color: white;
  text-align: center;
  line-height: 3.8;
  letter-spacing: 5px;
  font-size: 1.2rem;
  font-family: '';
  transition: all .3s;
}

#hover-block:hover~p {
  font-size: 1.2rem;
  transition: all .3s;
  font-size: 1.6rem;
  line-height: 2.7;
  color:orange;
}

  

  
  
  
GitHub



Ответ 2

Анимация срабатывает по hover на красную область:



#pt:hover {
  d: path("m 15,135 c 63,-16 122,-13 179,0 v 54 c -57,11 -117,14 -179,0 z");
  d: "m 15,135 c 63,-16 122,-13 179,0 v 54 c -57,11 -117,14.35755 -179,0 z";
}



Ответ 3

Ну вот ребята как то так :) 

Суть ясно ничего сложного нету 

Ответил на основе ссылки который дал Other



var createBouncyButtons = (function() {
  function createButton(el) {
    var pathEl = el.querySelector('path');
    var spanEl = el.querySelector('span');
    function hover() {
      anime.remove([pathEl, spanEl]);
      anime({
        targets: pathEl,
        d: 'M10,10 C10,10 50,7 90,7 C130,7 170,10 170,10 C170,10 172,20 172,30 C172,40
170,50 170,50 C170,50 130,53 90,53 C50,53 10,50 10,50 C10,50 8,40 8,30 C8,20 10,10
10,10 Z',
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: spanEl,
        scale: 1.15,
        duration: 800,
        offset: 0
      });
    }
    function down() {
      anime.remove([pathEl, spanEl]);
      anime({
        targets: pathEl,
        d: 'M10,10 C10,10 50,9.98999977 90,9.98999977 C130,9.98999977 170,10 170,10
C170,10 170.009995,20 170.009995,30 C170.009995,40 170,50 170,50 C170,50 130,50.0099983
90,50.0099983 C50,50.0099983 10,50 10,50 C10,50 9.98999977,40 9.98999977,30 C9.98999977,20
10,10 10,10 Z',
        elasticity: 700,
        offset: 0
      });
      anime({
        targets: spanEl,
        scale: 1,
        duration: 800,
        offset: 0
      });
    }
    el.onmouseenter = hover;
    el.onmousedown = down;
    el.onmouseleave = down;
  }
  var buttonEls = document.querySelectorAll('.button');

  for (var i = 0; i < buttonEls.length; i++) {
    var el = buttonEls[i];
    createButton(el);
  }
})();
* {
  margin: 0;
  padding: 0;
}

svg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.button {
  opacity: 0;
  position: relative;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 60px;
  text-decoration: none;
}

.button.blue {
  color: #5E89FB;
}


        
        Documentation