I'm using jquery fullpage and anime js for my new project.

I'm running animation (appear) when callback afterLoad is fired.
My problem is, sometimes when user scrolls faster than animation duration, next animation (hiding) which is fired onLeave is looking not as intended.
I tried using anime.js complete callback, but I wasn't able to do what I intended.
Online reproduction:
<https://jsfiddle.net/5mwbh9ok/6/>

```
.heading span {
  position: relative;
display: inline-block;
white-space: pre;
opacity: 0;
}

```

I found this question, which is similar, but I couldn't implement slide delay for more than 1 slide:
[Fullpage.js. Adding a scroll delay](https://stackoverflow.com/questions/36176677/fullpage-js-adding-a-scroll-delay)

What I want to accomplish is to wait for animation to complete before moving to next section. 

I'd really appreciate any tips on how to resolve this matter :)