anime.js hover effect

anime-js-hover-effect.markdown

anime.js hover effect

A Pen by Vlastimil Fiser on CodePen.

License.

index.html

<div class="wrap">
  <div class="inner">Thsi is UI of Bellgram app etc.</div>
</div>

script.js

var buttonEl = document.querySelector('.wrap');
var textEl = document.querySelector('.inner');

function animateButton(scale, duration, elasticity) {
  anime.remove(buttonEl);
  anime({
    targets: buttonEl,
    scale: scale,
    duration: duration,
    elasticity: elasticity
  });
}

function animateText(translateX) {
  anime.remove(textEl);
  anime({
    targets: textEl,
    translateY: translateX,
    elasticity: 300
  });
}

function enterButton() { animateButton(1.2, 800, 400) };
function leaveButton() { animateButton(1.0, 600, 300) };

function enterText() { animateText(-70) };
function leaveText() { animateText(0) };

buttonEl.addEventListener('mouseenter', enterButton, false);
buttonEl.addEventListener('mouseleave', leaveButton, false);
buttonEl.addEventListener('mouseenter', enterText, false);
buttonEl.addEventListener('mouseleave', leaveText, false);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

style.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: black;
}

.wrap {
  display: flex;
  position: relative;
  overflow: hidden;
  margin: 0 20px;
  height: 8rem;
  width: 16rem;
  padding: 0 2rem;
  border: none;
  background: white;
  -webkit-border-radius: 4px;
}

.inner {
  position: absolute;
  bottom: -40px;
}