title: fullPage.js + GSAP Tweenmax Animation
body: <p>How can I achieve this kind of <a href="https://sharp.vn/vn/cong-nghe-long-giat-khong-lo/#" rel="nofollow noreferrer">website</a>, by utilize fullPage.js integrated with GSAP plugins? Tried few times and I'm not very very clear with jQuery code. </p>
  
  <p>The sequence will be:</p>
  
  <p>-Animation start on page load</p>
  
  <p>-When scroll down, animation reverse will trigger first until finish, then follow by jump to next section.</p>
  
  <p>-Animation start on second section page load</p>
  
  <p>--When scroll up on the second section, animation reverse will trigger first until finish, then follow by jump to previous section.</p>
  
  <p>--When scroll down on the second section, animation reverse will trigger first until finish, then follow by jump to next section.</p>
  
  <p>Appreciate your kind advice for this matter. </p>
  
  <p>The unhappy <a href="https://jsfiddle.net/97tbk/1642/" rel="nofollow noreferrer">reproduction demo</a>.</p>
  
  <pre><code>var head = $("#one h1"),
      head2 = $("#two h1");
  
  tl = new TimelineLite();
  
  $("#reverse").click(function(){tl.reverse();});
  
  $("#restart").click(function(){tl.restart();});
  
  $('#fullpage').fullpage({
      sectionsColor: ['darkgrey', 'grey', 'lightgrey'],
      scrollingSpeed: 1000,
      afterLoad: function(anchorLink, index) {
  
      var loadedSection = $(this);
  
      if (index == 1) {
          $(head2).hide();
          tl.staggerFrom(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5)
      }
  
      if (index == 2) {
          tl.staggerFrom(head2, 0.2, {scale: 0,autoAlpha: 0}, 0.5)
      }
  
      },
      onLeave: function(index, nextIndex, direction) {
  
      var leavingSection = $(this);
  
      if (index == 1 &amp;&amp; direction == 'down') {
        //tl.reverse(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5);
        $(head2).show();
      } else if (index == 2 &amp;&amp; direction == 'up') {
        $(head2).hide();
        //tl.restart(head, 0.2, {scale: 0,autoAlpha: 0}, 0.5);
      }
  
    }
  });
  </code></pre>