fullPage.js Skeleton

This is just a skeleton of fullPage.js, you can fork it and add you desire code so you can show your code easily.

HTML

<link rel="stylesheet" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.easings.min.js"></script>
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body>
    <div id="fullpage">
        <div class="section" id="SECTION1">
             <h1 class="h1"><span>ONE</span></h1>

        </div>
        <div class="section" id="SECTION2">
            
            <div class="slide" id="slidetext1">
                <img id="JUST A BACKGROUND IMAGE" src="">
                <img id="deer" src="images/deer.jpg">
                <img id="rock" src="images/rock.jpg">
            </div>
            
            <div class="slide" id="slidetext2">
                <img id="section-background" src="images/hipster.jpg">
            </div>
            <div class="slide" id="slidetext3"></div>
                
                
// SO I HAVE 2 SECTIONS: the first with simple text and the second with 3 slides      
                
            
        </div>
</body>

CSS

/*HERE I HAVE MADE THE 2 IMAGES "DISSAPEAR" BY GIVING NEGATIVE POSITION SO I CAN ANIMATE THEM WITH left:"0" and right"0" in js */

#slidetext1 #deer {
    position: absolute;
    left: -271px;
    bottom: 0;
    transition:all 1.2s ease-out;
    -webkit-transition: all 1.2s ease-out;
}

#slidetext1 #rock {
    position: absolute;
    right: -271px;
    bottom: 0;
    transition:all 1.2s ease-out;
    -webkit-transition: all 1.2s ease-out;
}

JavaScript

//AND THE PROBLEM IS HERE! when i scroll down to the second section the animation shows but if i change section the images won't go back to -271px ...


$(document).ready(function () {

    $.fn.fullpage({

        afterLoad: function (anchorLink, index) {
            var loadedSection = $(this);

            //using index
            if (index == 1) {
                $('#slidetext1 #rock').animate({
                    right: "0px"
                });
                $('#slidetext1 #deer').animate({
                    left: "0px"
                });
            }
        },


        onLeave: function (index, nextIndex, direction) {
            var leavingSection = $(this);

            //after leaving section 2
            if (index == 2 && direction == 'up') {
                $('#slidetext1 #rock').animate({
                    right: "-271px"
                });
                $('#slidetext1 #deer').animate({
                    left: "-271px"
                });
            } else if (index == 2 && direction == 'down') {
                alert("Going to section 1!");
            }
        }

    });
});