JOS : Animate On Scroll Library Examples

  <div
    class="demo-container jos"    
    data-jos_animation="fade" >
  
      Fade
  
  </div>

  <div
    class="demo-container jos"    
    data-jos_animation="fade-right" >
  
      Fade [Right]
  
  </div>

<div
  class="demo-container jos"    
  data-jos_animation="fade-left" >

    Fade [Left]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="fade-up" >

    Fade [Up]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="fade-down" >

    Fade [Down]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom" >

    Zoom

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-out-right" >

    Zoom Out [Right]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-out-left" >

    Zoom Out [Left]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-out-down" >

    Zoom Out [Down]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-out-up" >

    Zoom Out [Up]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-in" >

    Zoom In

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-in-right" >

    Zoom in [Right]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-in-left" >

    Zoom in [Left]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-in-down" >

    Zoom in [Down]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="zoom-in-up" >

    Zoom in [Up]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="flip" >

    Flip

</div>

<div
  class="demo-container jos"    
  data-jos_animation="flip-left" >

    Flip [Left]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="flip-up" >

    Flip [Up]

</div>

<div
  class="demo-container jos"    
  data-jos_animation="flip-down" >

    Flip [Down]

</div>