fullPaje Base example

https://github.com/alvarotrigo/fullPage.js

by alvarotrigo

HTML

<link rel="stylesheet" href="https://unpkg.com/fullpage.js/dist/fullpage.min.css">
<script src="https://unpkg.com/fullpage.js/dist/fullpage.min.js"></script>
<div id="fullpage">
    <div class="section">
        <div id="element">
            Section 1
        </div>
    </div>
    <div class="section">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
    </div>
    <div class="section">Section 3</div>
    <div class="section">Section 4</div>
</div>

CSS

.section {
    text-align: center;
    font-size: 3em;
    font-family: arial;
}
#element{
    transition: all 2s ease;
}
#element.animate{
    margin-left: 250px;
}

JavaScript

var delay = 2000; //milliseconds
var timeoutId;
var animationIsFinished = false;

new fullpage('#fullpage', {
      sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(origin, destination, direction){
        var curTime = new Date().getTime();

        //animating my element
        $('#element').addClass('animate');

        clearTimeout(timeoutId);

        timeoutId = setTimeout(function(){
            animationIsFinished = true;

            fullpage_api.moveTo(destination.index + 1);
        }, delay);

        return animationIsFinished;
    },
});