Animasi Sederhana dengan Plugin Animate On Scroll

Think Digital tidak menyukai animasi pada website. Animasi yang berlebihan cenderung akan membuat pengunjung merasa terganggu sekaligus membuat customer experience menjadi turun dan tidak maksimal.

Kecuali produk atau jasa yang Anda jual adalah produk atau jasa kreatif yang memang memerlukannya, memiliki website dengan animasi yang berlebihan lebih banyak berdampak negatif dibandingkan positif bila kita melihat dari kacamata pengunjung. Animate on Scroll adalah animasi sederhana yang sangat cocok untuk diterapkan ke mayoritas jenis website.

Plugin Animate on Scroll ini dapat diunduh secara gratis dari halaman resmi WordPress plugin repository. Anda bisa men-download-nya langsung di sini https://wordpress.org/plugins/animate-on-scroll/ atau dengan mencarinya dengan kata kunci “Animate on Scroll” dari dashboard plugin WordPress Anda.

Plugin ini dapat membantu Anda untuk mengintegrasikan AOS (Animate on Scroll) library buatan Michał Sajnóg dengan mudah ke website berbasis WordPress yang Anda miliki. Anda dapat menambahkan animasi apapun dari AOS library hanya dengan menambahkan class name pada elemen yang Anda inginkan. Contoh-contoh animasi AOS dapat dilihat di sini.

Plugin ini dapat berguna sekali bila Anda menggunakan:

• Page builder yang belum memiliki fitur AOS secara built-in
• Page builder yang tidak menyediakan opsi untuk menambah custom data-attribute seperti page builder native bawaan WordPress: Gutenberg.

Menambahkan animasi AOS pada Elemen

Anda hanya perlu menambahkan class-name untuk animasi AOS yang Anda diinginkan ke elemen yang Anda inginkan dan plugin ini akan menambahkan atribut AOS yang sesuai ke elemen tersebut.

Daftar class-name yang bisa Anda pilih dan animasinya:

Fade animations

• fade: aos-fade
• fade-up: aos-fade-up
• fade-down: aos-fade-down
• fade-left: aos-fade-left
• fade-right: aos-fade-right
• fade-up-right: aos-fade-up-right
• fade-up-left: aos-fade-up-left
• fade-down-right: aos-fade-down-right
• fade-down-left: : aos-fade-down-left

Flip animations

• flip-up: aos-flip-up
• flip-down: aos-flip-down
• flip-left: aos-flip-left
• flip-right: aos-flip-right

Slide animations

• slide-up: aos-slide-up
• slide-down: aos-slide-down
• slide-left: aos-slide-left
• slide-right: aos-slide-right

Zoom animations

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

Mengubah Setting Animasi

Secara default, setting global animasi AOS pada plugin ini adalah:

• offset: -100
• duration: 1100
• easing: ease
• delay: 0
• once: true

tapi Anda bisa mengubahnya menggunakan filter aos_init yang sudah disediakan. Contoh:

add_filter( 'aos_init', function() {
    return '
    var aoswp_params = {
        "offset":"200",
        "duration":"1800",
        "easing":"ease-in-out",
        "delay":"0",
        "once": false};
    ';
} );

atau menambahan class-name tambahan ke masing-masing element untuk setting individual dari masing-masing elemen. Plugin ini akan secara otomatis menambahkan atribut AOS yang sesuai ke elemen-elemen tersebut.

Once behavior:

• once=true: aos-once-true
• once=false: aos-once-false

Easing functions:

• linear: aos-easing-linear
• ease: aos-easing-ease
• ease-in: aos-easing-ease-in
• ease-out: aos-easing-ease-out
• ease-in-out: aos-easing-ease-in-out
• ease-in-back: aos-easing-ease-in-back
• ease-out-back: aos-easing-ease-out-back
• ease-in-out-back: aos-easing-ease-in-out-back
• ease-in-sine: aos-easing-ease-in-sine
• ease-out-sine: aos-easing-ease-out-sine
• ease-in-out-sine: aos-easing-ease-in-out-sine
• ease-in-quad: aos-easing-ease-in-quad
• ease-out-quad: aos-easing-ease-out-quad
• ease-in-out-quad: aos-easing-ease-in-out-quad
• ease-in-cubic: aos-easing-ease-in-cubic
• ease-out-cubic: aos-easing-ease-out-cubic
• ease-in-out-cubic: aos-easing-ease-in-out-cubic
• ease-in-quart: aos-easing-ease-in-quart
• ease-out-quart: aos-easing-ease-out-quart
• ease-in-out-quart: aos-easing-ease-in-out-quart

Animation Duration:

• 100ms: aos-duration-100
• 200ms: aos-duration-200
• 300ms: aos-duration-300
• 400ms: aos-duration-400
• 500ms: aos-duration-500
• 600ms: aos-duration-600
• 700ms: aos-duration-700
• 800ms: aos-duration-800
• 900ms: aos-duration-900
• 1000ms: aos-duration-1000
• 1100ms: aos-duration-1100
• 1200ms: aos-duration-1200
• 1300ms: aos-duration-1300
• 1400ms: aos-duration-1400
• 1500ms: aos-duration-1500
• 1600ms: aos-duration-1600
• 1700ms: aos-duration-1700
• 1800ms: aos-duration-1800
• 1900ms: aos-duration-1900
• 2000ms: aos-duration-2000
• 2100ms: aos-duration-2100
• 2200ms: aos-duration-2200
• 2300ms: aos-duration-2300
• 2400ms: aos-duration-2400
• 2500ms: aos-duration-2500
• 2600ms: aos-duration-2600
• 2700ms: aos-duration-2700
• 2800ms: aos-duration-2800
• 2900ms: aos-duration-2900
• 3000ms: aos-duration-3000