Menjiwai karbon yang tersimpan di setiap pohon di planet ini

Oleh: Mikel Maron

Menjelang COP27 kami diminta untuk membuat video animasi tentang karbon yang tersimpan di setiap pohon di planet ini untuk Ctrees yang luar biasa . Kami benar-benar menyukai Climate TRACE dan yang lainnya di Earthrise .. tetapi tidak dapat menolak tantangan itu. Hasilnya adalah animasi yang efektif menggunakan Mapbox Globe dan template storytelling .

"Permintaan" adalah untuk video yang diperbesar, digeser, dan diputar perlahan melintasi hutan dan bentang alam lainnya di seluruh dunia, yang menggambarkan analisis karbon terperinci oleh CTrees.

Pada awalnya, kami mempertimbangkan berbagai pendekatan mengikuti jalur Mapbox seperti River Runner dan animasi rute sinematik Tour de France , dan GL Director yang dibangun oleh Development Seed pada peluncuran Mapbox 3D Terrain, tetapi mereka tidak mengizinkan kontrol kamera kami membutuhkan. Template Mendongeng ternyata sangat cocok — template ini memungkinkan kontrol kamera yang tepat dan transisi animasi melalui setiap bab teks cerita melalui file konfigurasi langsung. Ini adalah solusi yang elegan dan sederhana, dan telah diadopsi dan dimodifikasi secara luas untuk jurnalisme data. Gerakan biasanya dikontrol dengan menggulir ke bawah halaman. Bagaimana jika gerakan itu terjadi secara otomatis tanpa masukan?Untuk mencapai hanya efek animasi globe tanpa cerita hanya perlu menyembunyikan kotak teks untuk setiap bab.

Setelah beberapa iterasi untuk mengimplementasikan perilaku yang tepat, ternyata hanya membutuhkan beberapa tambahan pada template Mendongeng. Perubahan utama adalah menggulir ke bab berikutnya secara otomatis setelah transisi animasi berakhir. Template Mendongeng membuat elemen HTML untuk setiap bab berdasarkan konfigurasi, lalu menggunakan scrollama untuk memicu pergerakan dan perubahan pada peta saat menghadapi setiap bab. Scrollama memberikan atribut "data-scrollama-index" ke setiap elemen bab dalam cerita. Jadi saat animasi berhenti, kami meminta elemen scrollama berikutnya, dan menggulir ke sana. Itu berhasil!

if (config.auto) {
  var next_chapter = (current_chapter + 1) % config.chapters.length;
  map.once('moveend', () => {
    document.querySelectorAll(
      '[data-scrollama-index="' + next_chapter.toString() + '"]')[0].scrollIntoView();
  });
}

Perubahan kecil bisa memberikan hasil yang besar. Kami berharap penambahan Storytelling ini terbukti bermanfaat bagi orang lain. Bagikan bagaimana Anda menganimasikan globe Anda!