Estou trabalhando em um projeto em Vue e preciso que quando o usuário rolar a página e chegar em uma especificada div, seja adicionado um efeito ou uma classe nessa div, semelhante ao ScrollReveal
Alguém já precisou fazer algo semelhante no Vue?
Segue o código css do que eu possuo e que preciso que seja executado ao chegar em div
O efeito do título em h2 deve ser executado quando ele é exibido na tela.
@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>