> ## Documentation Index
> Fetch the complete documentation index at: https://v1-learn.neoartd.my.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Latihan Menambahkan Interaksi Scrolling pada Overflow & Animasi

Pada latihan ini, Anda akan memahami lebih dalam cara untuk membuat mockup lebih interaktif dengan menambahkan scrolling & animasi.

## Membuat Horizontal Scrolling pada Overflow

1. Hal lainnya yang masih aneh adalah komponen Filter Kategori yang seharusnya bisa digeser ke kanan. Namun, saat ini tidak terjadi apa pun ketika Anda menggesernya.\
   [![dos:ffa65b19b3665fc06798366ee797a06f20211007153827.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:ffa65b19b3665fc06798366ee797a06f20211007153827.gif)](# "dos:ffa65b19b3665fc06798366ee797a06f20211007153827.gif")
2. Untuk mengatasinya, klik elemen Filter Kategori dan pilih **Horizontal Scrolling** pada **Overflow scrolling**. Jangan lupa untuk **mengubah lebar elemen sesuai dengan lebar halaman** supaya elemen tersebut menjadi *overflow* (melebihi batas).[![dos:4514fd5ec5443215145399bd0b04daf720230503170420.png](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:4514fd5ec5443215145399bd0b04daf720230503170420.png)](# "dos:4514fd5ec5443215145399bd0b04daf720230503170420.png")
3. Jalankan kembali prototype dan lihat hasilnya.\
   [![dos:7445c8d45bdd36b46d90843f56be1a9d20211007154104.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:7445c8d45bdd36b46d90843f56be1a9d20211007154104.gif)](# "dos:7445c8d45bdd36b46d90843f56be1a9d20211007154104.gif")

## Menambahkan Animasi pada Interaksi

4. Supaya prototype kita benar-benar mirip seperti aplikasi aslinya, kita akan menambahkan animasi pada setiap aksi. Caranya cukup mudah, klik garis interaksi dan pilih jenis animasi pada bagian **Animation**.\
   [![dos:de270b1b2ecec56e85cf86a1f1507b9d20211007153613.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:de270b1b2ecec56e85cf86a1f1507b9d20211007153613.jpeg)](# "dos:de270b1b2ecec56e85cf86a1f1507b9d20211007153613.jpeg")\
   Berikut ini adalah beberapa jenis animasi yang bisa Anda pilih:

   Jenis Animasi

   Keterangan

   Dissolve

   Semakin memudar/transparan ke halaman selanjutnya.

   Smart Animate

   Otomatis membuat animasi untuk elemen yang mirip di kedua halaman.

   Move in/out

   Membuat animasi halaman selanjutnya masuk atau keluar.

   Push

   Animasi halaman selanjutnya masuk dan halaman sekarang keluar.

   Slide in/out

   Animasi halaman selanjutnya masuk dan halaman sekarang keluar dengan sedikit efek fade(pemudaran).

   Selain itu, juga ada pengaturan kecepatan animasi, seperti:

   Jenis Kecepatan Animasi

   Keterangan

   Linear

   Kecepatan datar

   Ease in

   Semakin cepat

   Ease out

   Semakin lambat

   Ease in and out

   Cepat di tengah

   Ease in back

   Memantul di awal

   Ease out back

   Memantul di akhir

   Ease in and out back

   Memantul di awal dan akhir

   Custom

   Mengatur kurva kecepatan sendiri

5. Berikut ini adalah contoh hasil dari pengaturan animasi di atas.\
   [![dos:f4ac59ad56b9ed09348ad6a21fc9910c20211007160355.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:f4ac59ad56b9ed09348ad6a21fc9910c20211007160355.gif)](# "dos:f4ac59ad56b9ed09348ad6a21fc9910c20211007160355.gif")

6. Yuk kita terapkan juga pada setiap aksi lainnya! Sehingga, hasil akhir dari prototipe akan terlihat seperti ini.\
   [![dos:906c2687dd3c7e5564b5cdb1ea84f46120211007160535.gif](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:906c2687dd3c7e5564b5cdb1ea84f46120211007160535.gif)](# "dos:906c2687dd3c7e5564b5cdb1ea84f46120211007160535.gif")

Wah keren! Prototype yang Anda buat sudah benar-benar mirip dengan aplikasi aslinya, ya. Nah, sekarang adalah giliran Anda untuk melanjutkan project studi kasus masing-masing. Apabila sudah selesai Anda dapat membagikan hasil prototype dengan klik **Share prototype** pada menu yang ada di pojok kanan atas dan klik **Copy link**.\
[![dos:316b0094ddc6c61a530729281db57c5820211007153612.jpeg](https://dicoding-web-img.sgp1.cdn.digitaloceanspaces.com/original/academy/dos:316b0094ddc6c61a530729281db57c5820211007153612.jpeg)](# "dos:316b0094ddc6c61a530729281db57c5820211007153612.jpeg")

Berikut ini adalah contoh link dari prototype pada latihan ini:

* [Prototipe Aplikasi Pemesanan Kopi](https://www.figma.com/proto/nahl4zkw5PVbWYaNG9uQqR/Latihan-UX-Designer?node-id=172%3A222\&scaling=scale-down\&page-id=172%3A220\&starting-point-node-id=172%3A222)

Sedangkan untuk project prototype dapat Anda lihat di sini:

* [Project Prototipe Aplikasi Pemesanan Kopi](https://www.figma.com/file/nahl4zkw5PVbWYaNG9uQqR/?node-id=172%3A220)