CODEWITHSUNDEEP
javascriptjqueryfullpage.js
Tronald
Tronald

Reputation: 37

Having trouble removing and adding a class with fullpage.js

I'm using animate.js and fullpage.js. My goal is to add a slideOutLeft animation when scrolling away from a section, and to add a slideInLeft animation when visiting a section.

My current code removes the slide in animation and applies the slide out animation, but never reapplies the slide in animation.

$('#fullpage').fullpage({
   afterLoad: function(anchorLink, index) {
    $('.text').addClass('animated slideInLeft');
  },
  onLeave: function(index, nextIndex, direction) {
    
    $('.text').removeClass('animated slideInLeft');  
 
    $('.text').addClass('animated slideOutLeft');  
    }
 
});
#first {
  background-color: yellow;
}
#second {
  background-color: blue;
}
.height {
height: 100vh;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css" rel="stylesheet" />

<div id="fullpage">

  <div class="section height" id="first">
      <h2 class="text">Something1</h2>
  </div>

  <div class="section height" id="second">
     <h2 class="text">Something2.</h2>
    
  </div>
  <div class="section height" id="third">
    <h2 class="text">Something else </h2>
  </div>

</div>

Upvotes: 1

Views: 800

Answers (1)

Jacky Shek
Jacky Shek

Reputation: 955

For the onLeave, you must use the leaving section to find the text and apply the slideOutLeft in onLeave. Also remember that remove the slideOutLeft in afterLoad which the text can slide it out again.

$('#fullpage').fullpage({
  afterLoad: function(anchorLink, index) {
    $(this).find('.text').removeClass('animated slideOutLeft');
    $(this).find(".text").css("display","block");
    $(this).find('.text').addClass('animated slideInLeft');
  },
  onLeave: function(index, nextIndex, direction) {
    var leavingSection = $(this);
    $(leavingSection).find(".text").removeClass('animated slideInLeft');  

    $(leavingSection).find(".text").addClass('animated slideOutLeft');  
    }

});

Here is the example: https://jsfiddle.net/39gadbnv/1/

Upvotes: 1

Related Questions