title: Jquery animation pagePiling
body: <p>I am looking for jquery animation similar to this website <a href="http://cuberto.com/" rel="noreferrer">http://cuberto.com/</a>.
  So far i have accomplished this link <a href="http://codepen.io/mirmibrahim/pen/MJoGBY" rel="noreferrer">http://codepen.io/mirmibrahim/pen/MJoGBY</a> through pagePiling.js. Can anyone assist me complete it exactly the way on curberto. I dont know how to load half of the page with image and half with text and open the next section to be from the square animating on first slide.</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;pagePiling.js plugin - Horizontal scroll&lt;/title&gt;
    &lt;meta name="author" content="Alvaro Trigo Lopez" /&gt;
    &lt;meta name="description" content="pagePiling.js plugin by Alvaro Trigo." /&gt;
    &lt;meta name="keywords" content="pile,piling,piling.js,stack,pages,scrolling,stacking,touch,fullpile,scroll,plugin,jquery" /&gt;
    &lt;meta name="Resource-type" content="Document" /&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="../jquery.pagepiling.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="examples.css" /&gt;
  
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;!--script src="../jquery-1.9.1.js"&gt;&lt;/script--&gt;
  
  
    &lt;script type="text/javascript" src="../jquery.pagepiling.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
        /*
         * Plugin intialization
         */
        $('#pagepiling').pagepiling({
          direction: 'horizontal',
          menu: '#menu',
          scrollingSpeed: 2000,
          anchors: ['page1', 'page2', 'page3', 'page4'],
          sectionsColor: ['black', '#1C252C', '#F27B1D', '#39C'],
          navigation: {
            'position': 'right',
            'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
          },
          afterRender: function() {
            $('#pp-nav').addClass('custom');
            console.log("After Render ");
  
          },
          afterLoad: function(anchorLink, index) {
  
            // $.fn.pagepiling.setAllowScrolling(false);
            console.log("After Load " + index);
            if (index == 1) {
  
              console.log("index " + index);
            } else if (index == 2) {
  
            }
  
            if (index &gt; 1) {
              $('#pp-nav').removeClass('custom');
            } else {
              $('#pp-nav').addClass('custom');
            }
          },
          onLeave: function(index, nextIndex, direction) {
            console.log("After Load " + index);
  
            if (index == 1) {
  
              /*                  $( "#block" ).animate({
                                          width: "100%",
                                          opacity: 0.4,
                                          marginLeft: "0.6in",
                                          fontSize: "12em",
                                          borderWidth: "20px"
                                          }, 4000 , function() {
                  // Animation complete.
  
                      //alert("s");
                });
              */
  
              $("#block").animate({
                width: "58%"
              }, 1000, function() {
                console.log("animation finished");
                $.fn.pagepiling.setScrollingSpeed(500);
  
              });
  
            } else if (index == 2 &amp;&amp; nextIndex == 1) {
  
              $("#block").animate({
                width: "0%"
              }, 3000, function() {
                console.log("animation finished");
                $.fn.pagepiling.setScrollingSpeed(2000);
  
              });
  
            }
  
          }
  
        });
      });
    &lt;/script&gt;
  
  
    &lt;style&gt;
      #section1 img {
        margin: 20px 0;
        opacity: 0.7;
      }
      /* colors
       * --------------------------------------- */
  
      #colors2,
      #colors3 {
        position: absolute;
        height: 163px;
        width: 362px;
        z-index: 1;
        background-repeat: no-repeat;
        left: 0;
        margin: 0 auto;
        right: 0;
      }
  
      #colors2 {
        background-image: url(imgs/colors2.gif);
        top: 0;
      }
  
      #colors3 {
        background-image: url(imgs/colors3.gif);
        bottom: 0;
      }
      /* Overwriting fullPage.js tooltip color
      * --------------------------------------- */
  
      #pp-nav.custom .pp-tooltip {
        color: #AAA;
      }
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;ul id="menu"&gt;
      &lt;li data-menuanchor="page1" class="active"&gt;&lt;a href="#page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
      &lt;li data-menuanchor="page2"&gt;&lt;a href="#page2"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
      &lt;li data-menuanchor="page3"&gt;&lt;a href="#page3"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
  
    &lt;div id="pagepiling"&gt;
      &lt;div class="section" id="section1"&gt;
        &lt;!--img src="imgs/pagePiling-plugin.gif" alt="pagePiling" /--&gt;
  
        &lt;div class="intro"&gt;
          &lt;div&gt;
            &lt;div style="background:#F6303F;border-left: thick solid #F6303F; height:150px; width:8px; margin-left:42%;" id="block"&gt;
  
  
            &lt;/div&gt;
            &lt;h1 style="color: white;"&gt;DIGITAL&lt;/h1&gt;
            &lt;p style="color: white;"&gt;CREATIVE AGENCY&lt;/p&gt;
  
          &lt;/div&gt;
  
  
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="section"&gt;
        &lt;div class="intro"&gt;
          &lt;h1&gt;Simple to use&lt;/h1&gt;
          &lt;p&gt;Just use the option direction: 'horizontal' to have it working!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="section" id="section3"&gt;
        &lt;div class="intro"&gt;
          &lt;h1&gt;Isn't it great?&lt;/h1&gt;
          &lt;p&gt;Just as you expected!&lt;/p&gt;
          &lt;div id="colors2"&gt;&lt;/div&gt;
          &lt;div id="colors3"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>