Latihan 1: Intersection Observer — Web Animation

Latihan 1 dari materi Intersection Observer di Web Animation — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Buat function createObserverConfig(threshold, rootMargin) yang mengembalikan object konfigurasi IntersectionObserver.

Object harus memiliki properti:

root: null
threshold: nilai threshold yang diberikan
rootMargin: nilai rootMargin yang diberikan

Lalu buat function getAnimationClass(direction) yang mengembalikan CSS class name berdasarkan arah animasi:

"up" → "animate-from-bottom"
"down" → "animate-from-top"
"left" → "animate-from-right"
"right" → "animate-from-left"
default → "animate-fade"

Terakhir, buat function createStaggerDelays(count, baseDelay) yang mengembalikan array berisi delay untuk setiap elemen. Elemen ke-i mendapat delay i * baseDelay ms.

Hint

IntersectionObserver config: { root: null (viewport), threshold: 0-1 atau array, rootMargin: "top right bottom left" }.
createObserverConfig(threshold, rootMargin): return object dengan root: null, threshold, rootMargin. Semuanya sesuai parameter yang diberikan.
getAnimationClass(direction): "bottom" → "animate-from-bottom", "left" → "animate-from-left", "right" → "animate-from-right".