javascript - fullpage JS animation on section

Question

i' m making a fullpage Js website and i have animations in evry sections of my page, and i want that my animation play when i'm on the section, so i know have an after render option in this plugin but i dont know how to syntax it for make the css animation play there is my code ( in this example i'm trying to get the animation of the line of the section2 play only when i' m on the section2)

var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
				scrollingSpeed: 1000,	
       

			
				   });
				});

body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}

.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	text-align:center;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}

.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}



#line{
    position:absolute;
	width:340px;
	margin-top:20px;
	height:4px;
	background:rgba(0,0,0,1);
	  -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
}

 @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:600%;
      }
    }

 @-webkit-keyframes slidein {
      from {
        margin-left:0%;
        width:0%
      }
      
      to {
        margin-left:0%;
        width:340px;
      }
    }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>


  <div id="fullpage">
          
            <div class="section " id="accueil">
                <h2>section1</h2>
                <p></p>
            </div>
            <div class="section" id="don">
              <h2>section2</h2>
              <div id="line"></div>
 
          
            </div>
            <div class="section" id="tri">
           
                    <h2>3</h2>
             
            </div>
            <div class="section" id="recycle">
                    <h2>4</h2>

                    </div>
                    
    
        </div>
        

Answer 1

Check out this video: https://www.youtube.com/watch?v=qiCVPpI9l3M

That's ideal to deal with CSS animations, if you are looking for javascript or jQuery animations, then you should use the callbacks provided by fullPage.js such as afterLoad or onLeave:

 $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

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

        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});