fullpage.js animation with onLeave and afterLoad

Question

i'm using fullpage.js and i'd like to animate 2 images as soon as i get to the second section. looks like i can't make it work with css only, so i picked up some js code from the documentation. check this jsfiddle: http://jsfiddle.net/67oe1jvn/9/

the thing is: if i scroll down to the second section, the 2 images get animated and fade in from left and right sides. BUT if i change section, nothing happens... now i want the to "disappear" as soon as i leave the second section.

i used afterLoad and onLoad as said in the documentation, like this:

$.fn.fullpage({

afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        if(index == 1){
            $('#slidetext1 #rock').animate({right:"0px"});
            $('#slidetext1 #deer').animate({left:"0px"});
        }
    },
onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        if(index == 2 && direction =='up'){
            $('#slidetext1 #rock').animate({right:"-271px"});
            $('#slidetext1 #deer').animate({left:"-271px"});

      } else if(index == 2 && direction == 'down'){
            /* DO SOMETHING */
        }
}
});

i'm new with this plugins so would be cool if someone helps me :)

also i saw this guy posting a similar question that maybe can help clarifying what i need: fullPage.js onLeave event triggers .

Answer 1

Three things:

• If you post a jsfiddle, make sure it works... because it doesn't at all.

• You are initializing fullPage.js twice in your site. Inside myjs.js and outside it..

• You can create animations with just css if you want. Check this video.

If you want the images to dissappear again you'll have to tell fullPage.js to do it. It won't magically happen. Just use the onLeave again and say something like "whenever the next slide is not section 2, then hide my images".

if(nextIndex != 2){
   //hide images
}