How to create animated rollover arrow animation

Question

I want to make a rollover button like https://www.plantflags.com/en/

This websites buttons rollover effect. Example: if you rollover on button then the text should fade-out and an Arrow should come from the left and create. After the roll-out, the arrow goes to right side and fades-out and the text fades-in again.

Example: if you go to that website and roll-over that button, you'll understand.

I've studied their code, the CSS I can understand but there are is a JS issue which I can't understand.

Can you figure out how I can make it like this type of rollover effect.

There html code like

<a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button>Tell me more</a>

there data attribute modules/AnimatedArrowButton actually call js and create more span

Demo without effect https://jsfiddle.net/cyber007/78pshojd/

Answer 1

You can mix css and jQuery to achieve this effect (since you tagged your question with jQuery).

var timeout = null;
var transitionEnd = true;

jQuery('.line').on("mouseenter", function() {
  if (!transitionEnd)
    return;

  _this = jQuery(this);

  _this.addClass("hide-text");

  timeout = setTimeout(function() {
    _this.addClass("in");
  }, 300);

  transitionEnd = false;
}).on("mouseleave", function() {
  clearTimeout(timeout);

  jQuery(this).addClass("out").one("transitionend", function() {
    transitionEnd = true;
    jQuery(this).removeClass("hide-text out in");
  });


});

.line {
  background-color: red;
  border: 1px solid;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  display: block;
  float: left;
  font-size: 25px;
  height: 70px;
  line-height: 70px;
  margin: 30px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 200px;
}
.line::after {
  content: " ";
  border-top: 1px solid white;
  position: absolute;
  top: 50%;
  right: 100%;
  left: -150%;
  transition: left 0.5s, right 0.3s;
  opacity: 0;
}
.line::before {
  border-right: 1px solid white;
  border-top: 1px solid white;
  content: " ";
  height: 10px;
  position: absolute;
  right: 20%;
  top: calc(50% - 5px);
  transform: rotate(45deg) scale(0.2);
  transition: all 0.5s ease 0s;
  width: 10px;
  opacity: 0;
}
.line span,
.line.out span {
  opacity: 1;
  transition: 0.5s;
  transition-delay: 0.1s;
}
.line.hide-text span {
  opacity: 0;
}
.line.in::after {
  left: 20%;
  right: 20%;
  opacity: 1;
}
.line.in::before {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.line.out::before {
  right: -100%;
  transition-delay: 0s;
}
.line.out::after {
  left: 100%;
  right: -150%;
  transition: left 0.3s, right 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='line'>
  <span class='text'>Button Text</span>
</div>