Animasi AOS Js

Animasi AOS

 

Animate On Scroll Library (AOS JS) merupakan salah satu library javascript yang digunakan untuk membuat animasi baik itu teks maupun objek. Libray ini juga merupakan favorit saya dalam mengerjakan project front end. Cara menggunakannya:

1. Masuk ke halaman https://michalsnik.github.io/aos/ 
    
   
     
   Sumber : https://michalsnik.github.io/aos
    
2.  Masukan code CSS, JS ke Coding
   

 

 

Tampilan code dengan animasi AOS, hasil dari Code bisa di kepoin pada link berikut:

https://dwipangestu.github.io/

 

 Set animation using data-aos attribute:

<div data-aos="fade-in">

</div>

sumber : https://github.com/michalsnik/aos

And adjust behaviour by using data-aos-* attributes:

<div data-aos="fade-up"  

    data-aos-offset="200" 

    data-aos-delay="50" 

    data-aos-duration="1000" 

    data-aos-easing="ease-in-out"  

    data-aos-mirror="true"  

    data-aos-once="false"  

    data-aos-anchor-placement="top-center" > 

 </div>

 Sumber : https://github.com/michalsnik/ao

Daftar Animasi

• Fade animations:

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

• Flip animations:

  • flip-up
  • flip-down
  • flip-left
  • flip-right

• Slide animations:

  • slide-up
  • slide-down
  • slide-left
  • slide-right

• Zoom animations:

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

Anchor placements:

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

Easing functions:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart

 

Sumber :  

https://github.com/michalsnik/aos 

https://michalsnik.github.io/aos/ 

https://www.youtube.com/watch?v=t4TQGux6r7M