Add Animate or classes when scrolling the page and arrive in div

Question

I am working on a project in Vue and I need that when the user scrolls the page and arrives in a specific div, be added an effect or a class in that div, similar to Scrollreveal

Someone has already had to do something similar in Vue?

Follow the css code of what I own and need to be executed when arriving in div

The effect of the title on H2 must be executed when it is displayed on the screen.

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

h1 {
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

h2 {
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

<h1>
Hello World!
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>
World Hello!
</h2>

Answer 1

You need to use Javascript to detect the location of the element on the screen and activate the css animation when it is visible.

Following a step by step on which you can rely to get the result you want.

1. Create the HTML element that you check is on the screen (in your case H2).

2. Upload jQuery JS and Jquery Viewport Checker files.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="viewportchecker.js"></script>

3. Call the plugin on your H2

<script>
$(document).ready(function(){
  $('h2').viewportChecker({
  //Classe que irá adicionar a animação ou estilo quando o item aparecer na tela
  classToAdd: 'exemploDeClasse',

  // O offset dos elementos, permite que eles apareçam mais cedo ou mais tarde
  offset: 100,

  // Adiciona a possibilidade de remover a classe quando o elemento não está visível
  repeat: false,

  // Retorno de chamada para fazer depois que uma classe foi adicionada a um elemento. A ação retornará "add" ou "remove", dependendo se a classe foi adicionada ou removida.
  callbackFunction: function(elem, action){}
  });
});
</script>

I hope it helps in some way.

I recommend putting some class or id in this H2 so that it is easier to identify it.

Hug.