# Fitur Interactivity

## Apa Itu Interactivity?

{% embed url="<https://youtu.be/giq4fhuo2wA>" %}

Dengan Interactivity, kamu bisa **menambahkan efek animasi interaktif ke objek-objek** yang ada dalam proyek, sehingga proyek akan terlihat lebih keren.

Caranya cukup dengan mengatur objek target dan pemicu (*trigger*) terlebih dahulu, pilih animasi interaktif yang tersedia dan kamu inginkan. Sesudahnya, animasi interaktifnya akan langsung terpasang di proyekmu.

## Interactivity Pane

Kamu bisa lihat daftar *interactivity* yang ada di proyek di bagian **Interactivity Pane**. Selain itu, kamu juga bisa atur beberapa hal dari sini.

<figure><img src="https://2042424715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJIN8R8qZFWehtBgCyvgW%2Fuploads%2FQC5VZxwqC23BBmri7SlB%2Finteractivity-pane.jpg?alt=media&#x26;token=c74bfc36-b04f-42af-959f-3db9015006c4" alt=""><figcaption></figcaption></figure>

1. Putar *preview* dari sebuah *interactivity*.
2. Atur urutan *interactivity* berdasarkan waktu mulai (*start time*).
3. Masukkan *start time* dari sebuah *interactivity*.
4. Masukkan durasi dari sebuah *interactivity*.
5. Lihat pane Interactivity Settings.
6. Tambahkan *interactivity* baru.

### Pro Tip!

Dalam satu objek pemicu, kamu **bisa tambahkan lebih dari satu&#x20;*****interactivity***. Namun, pastikan juga *interactivity*-nya tidak terlalu banyak supaya animasinya lebih mudah untuk dimainkan juga.

## Cara Membuat Proyek dengan Interactivity

<figure><img src="https://2042424715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJIN8R8qZFWehtBgCyvgW%2Fuploads%2FnpIewx9RfIZM8nftBvSo%2Faction-label.jpg?alt=media&#x26;token=a85f278c-6e5b-4b66-a87b-66de1087f177" alt=""><figcaption></figcaption></figure>

Di bagian pengaturan, kamu bisa **memberi nama** masing-masing *interactivity*. Hal ini berguna untuk membedakan satu *interactivity* dengan *interactivity* lainnya.

<figure><img src="https://2042424715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJIN8R8qZFWehtBgCyvgW%2Fuploads%2FDtTkRFgxPKGW9stETg4u%2Ftrigger-object.jpg?alt=media&#x26;token=942c96ae-e1e8-42b6-b509-a3ae8ed2c12c" alt=""><figcaption></figcaption></figure>

Untuk membuat *interactivity* yang lebih canggih, kamu bisa **tentukan objek pemicu (*****trigger*****) dan juga target**. Baik objek pemicu maupun target bisa dipilih dari objek yang sama atau berbeda, sesuai dengan kebutuhanmu.

Logikanya, ketika kamu klik atau ketuk objek pemicu, objek tersebut akan memicu objek target untuk memainkan *interactivity* yang kamu tambahkan.

Setiap interactivity juga dilengkapi dengan ***advanced settings***. Kamu bisa atur ***start time*** (waktu mulai), ***duration*** (durasi), serta ***easing*** dari masing-masing *interactivity*; kecuali untuk opsi **Open URL**.

<figure><img src="https://2042424715-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJIN8R8qZFWehtBgCyvgW%2Fuploads%2FEqJYVnMt9YOtL85NTgXu%2Fadvance-setting.jpg?alt=media&#x26;token=f315bc23-4203-4323-a170-1f51f7bbbf3b" alt=""><figcaption></figcaption></figure>

Tentukan kapan objek target mulai menjalankan *interactivity* setelah diklik atau *tap*.

Tentukan berapa lama objek target akan memainkan *interactivity*.

Tentukan gerakan dari objek target, sehingga di poin tertentu, animasinya akan bergerak lebih cepat atau lambat.

### Pro Tip!

Seringkali, *start time* dan *duration* **berperan penting** untuk animasi *interactivity* yang kamu inginkan.

Jadi, pastikan kamu atur sesuai dengan kebutuhanmu supaya animasi-animasinya tidak berputar secara bersamaan.
