Library Animasi
Ringkasan Episode
Bantu KoreksiEpisode ini membahas tentang animasi dalam web development, mulai dari berbagai jenis animasi seperti micro-interaction, page transition, dan scroll-driven animation. Host membahas beberapa library animasi populer seperti GSAP, Framer Motion (sekarang Motion), Anime.js, dan Lottie. Diskusi juga mencakup perbandingan antara library-library tersebut dari sisi performa, ukuran bundle, licensing, dan kemudahan penggunaan. Ada juga showcase portfolio dari Yogi yang menggunakan GSAP dengan efek combat style yang impresif, serta pembahasan tentang view transition API sebagai alternatif modern untuk transisi antar halaman.
Poin-poin Utama
- •Ada beberapa kategori animasi dalam web: micro-interaction (button hover, loading state), page transition, dan scroll-driven animation
- •GSAP (GreenSock Animation Platform) adalah library animasi yang sudah lama ada, sekarang open source dan gratis digunakan namun tidak boleh untuk membangun produk yang kompetitif dengan Webflow
- •Framer Motion (sekarang bernama Motion) lebih populer di ekosistem React karena API yang ramah developer dengan konsep komponen (motion.div)
- •Motion memiliki varian 'motion mini' dengan ukuran bundle jauh lebih kecil (40-50 KB dibanding 500 KB versi full) untuk use case yang lebih sederhana
- •Lottie adalah format animasi yang memungkinkan embed file animasi (.lottie) dengan runtime tersendiri, mirip konsep Flash namun lebih modern
- •View Transition API adalah native browser API untuk transisi antar halaman, ada level 1 (client-side only) dan level 2 (multi-page)
- •Showcase portfolio Yogi menggunakan GSAP dengan efek combat style yang dikembangkan dengan bantuan AI, menunjukkan bagaimana AI dapat membantu developer belajar dan mengimplementasikan animasi kompleks
Dapatkan hanya di Domain Asia.
Hai kok bunyi enggak pencet Selamat malam selamat malam baru udah gini-gini tangan gua
kagak gagal aduh Iya ini musiknya apa lagu pembukanya ini banget ya jadi ke brand
Dapatkan hanya di Indonesia
Bagus sih
Jinglenya bagus
Luar biasa
Gimana kabar?
Lumayan
Sibuk-sibuk dengan
Dunia AI
Coding agent
Coding agent
Oh masih ngulik-ngulik ya
Kita ngulik terus
Kayaknya Ivan mainnya lumayan jauh
sekarang saya cuma bisa ngide itu yang eksekusi Ivan
biasanya
saya gak punya token
yang cukup
biasanya ada
kalau di sebuah tatanan sosial itu
ada yang visioner
ada yang eksekusioner
masih jadi visioner
bukan, provokator
saya
ngejorokin orang
saya eksekutor aja
oh ada ide bagus dari mas Riza
Lihat transkrip lengkap (1071 segmen lagi)
coba aja
ya ya ya
saya sendiri sudah gantel banyak lms.jax itu satu itu udah sudah-sudah saya publish cuma
apa namanya tujuannya tercapai masih tujuan saya belajar coding eh apa file coding dan
tujuan produknya sudah tercapai jadi sudah stabil pakai Oke terus yang terakhir itu ya apa persona
ya persona itu pertama persona itu Oh itu yang lmsj itu persona ya Iya saya malah ngulik ini
coding agent tapi malah bikin sendiri jadinya
nyoba-nyoba
pengen tau
gimana cara
bikin agent
jadi karena si LLM nya
udah pinter
kerja beratnya di LLM
kita cuman kasih
saya tuh coba sampai
kasih cara untuk
baca file dan nulis file
udah
looping nya itu
reasoning looping nya itu dari LLM nya
Jadi kerja beratnya itu sudah di LLM.
Mau kasih akses base, takutnya kelewat.
Over kan? Bahaya.
Jadi kasih read sama write aja.
Itu sudah lumayan.
Maksudnya dia sudah bisa saya bikin test case,
terus tolong bikin implementasi code.
Itu dia sudah bisa.
Tapi kan baru baca satu file, belum baca satu project.
Oh ibaratnya Mas Deja sudah membuat seperti copilot zaman dulu ya waktu awal-awal
Yes, yang buka tab ya, yang tabnya kebuka itu ada konteksnya disitu, itu doang
Yang kebuka saja, terus apa yang biasanya yang di select sama user
Lainnya, lain berapa aja
Lain berapa, betul
Ya baru sampai situ sih, gara-gara kemarin itu meetup kursor kan
tiba H berapa tuh jadi pembicara ya katanya mau keliaktifkan terus bahas apa ya bahas coding agent Akhirnya malah ngulik ke situ
Ah sekalian lah
Ternyata feedbacknya lumayan
Banyak yang apa namanya, yang appreciate juga kan
Akhirnya
Hmm, kayaknya seru nih
Bisa dibikin sesuatu
Mudah-mudahan teman-teman yang gak datang kemarin bisa
Nanti bisa baca juga artikelnya
Sama ini satu hal apa
kayak kadang ada feeling bercampur aduk nih antara feeling FOMO FOMO sama ber-out enggak
sama Jomo Jomo Joy of missing out Iya jadi itu ada bukunya saya sudah mulai beralih ke Jomo sekarang
kayak misalnya masih udah main opencloud saya gak ikut ikutan lagi opencloud yang lain pada
saya sampai sekarang belum sentuh opencloud loh
jadi kayak satu-satu dulu deh ini aja belum kelar nih gue bikin gue punya aplikasi gitu
satu-satu difokusin
kalau kita nggak prioritaskan bener jadi burnout
saya burnout ya
ini masalah apa ya?
problem juga karena kan kita punya apa ya?
punya nafsu yang besar untuk bikin-bikin dulu
tapi nggak punya bandwidth kan
sekarang hanya berbekal prompting kita sudah bisa mewujudkan ide yang ada di kepala kita
jadi kayaknya terlalu gampang untuk mewujudkan sesuatu
akhirnya, wah masih ada token gratis nih
bikin ini, bikin itu, bikin ini
aku ingin begitu jadi gede sih
jadi kayak, ya ini kurang, ini kurang
akhirnya, apa namanya
kayak saya bisa sampai jam 3, jam 4 pagi
kayak, eh dikit lagi ah dikit lagi
terus dipantengin ininya si
ini nya si lagi ya si buatnya Iya buatnya jalan terus jengen apa gitu ya kepo ya terus habis tuh
kayak diselang-seling supaya di orchestrate lagi orchestrate alurnya yang bagus terus pasti ada
yang ada yang bikin masalah emosi terus benerin lagi memorinya segala macam ah panjang lah ceritanya
akhirnya ah udahlah saya nggak ini udah mulai meninggalkan daripada stress sendiri
ternyata capek juga ya mantegin si AI ini ya
iya jadi dia banyak melakukan kesalahan-kesalahan yang aneh-aneh ya
namanya juga AI ya
dia cuma gak ada pintar-pintarnya disitu dia cuma the best predictor
the next world
The best next word predictor.
Next token ya.
Itu aja. Iya.
Kalau sudah mengerti itu, oh ya begini cara kerjanya.
Mungkin ini jadi ini ya kali ya, curse buat kita developer kali ya.
Kita nggak bisa meninggalkan begitu aja. Jadi kita harus kepo kan.
Wah dia ngapain nih? Wah itu.
Kalau misalkan buat entrepreneur mah dia happy banget.
Bikin ini, selesai, nggak peduli dia kodenya mau spaghetti kayak apa.
seperti apa, terus dia deliver ke user, dapat feedback, dia bikin lagi, kayaknya pada happy gitu.
Kalau kita pada stress malah ya.
Kan, iya, apa ya, pernah nggak sih sebenarnya as simple as kayak contohnya generate gambar deh pakai Gemini Nano.
terus hasil pertama
bagus nih
cuma ada
bagus, hasilnya bagus, cuma ada
satu atau dua area
yang kira-kira
nggak pas gitu
mungkin karena
kurang perfect lah gitu ya
kurang perfect dikit gitu
terus kita prompting, suruh dia benerin
makin lama hasilnya
jadi yang bener
kalau kan lo sudah tahu
cara gunakannya yang bener adalah kalau sudah yang pertama sudah bagus tapi ada gak perfect gak usah dibikin perfect
buang bikin baru karena si LLM atau AI ini lebih bagus generate saat konteksnya kosong
Kalau konteksnya sudah ada sebelumnya, dia makin halu.
Justru kalau kita biarkan dia yang pertama langsung jadi, bagus.
Makanya sekarang saya kalau misalnya ada feature,
yang kira-kira feature-nya cukup besar,
Either saya breakdown kecil-kecil
Atau saya tandingin
Di dua sesi yang berbeda
Mumpung tokennya masih ada
Di dua sesi yang berbeda
Dan saling
Nanti sudah selesai
Minta
Agent yang berbeda
Untuk nge-quote review
Jadi dengan fresh context
Mereka justru lebih
Otaknya lebih fresh
Jadi kayak
Anggap aja seperti manusia
Yang baru bangun
Di sore hari disuruh bikin sesuatu
Eh tergantung orang ya
Tapi di sore hari
Anggap aja normalnya
Seger di pagi sore sudah capek
Di sore hari dibikin sesuatu
Pasti pengennya cepat kelar pengen cepat pulang
Jadi banyak kesalahan gitu ya
Sudah banyak konteks dari pagi
Sedangkan kalau disuruh bikin
benerin atau buat feature dari pagi atau saat datang kantor bikin-bikin feature lebih lebih
fresh lebih banyak akurasinya lebih tinggi daripada akurasi di setelah penat satu harian
mungkin itulah sebabnya apa eh metode rafwigum looping itu efektif ya karena setiap kali bikin
satu sesi baru di atas sesi dia akan kosong session Iya makanya sih cloud code pertama
kali di play mode setelah play mode dia bilang mau dieksekusi clear context eksekusi clear
konteks dulu ya jadi plan modnya disimpan habis itu clear clear konteks ya teman-teman yang nonton
pada pakai enggak sih jangan-jangan kita hidup di babel nih teman-teman yang lain masih ngoding
biasa ada iya nanti lagi bahas mungkin anti jadi jauh melenceng kita melenceng ya padahal opik
ini berbeda ya, bukannya AI ya
kita kayaknya tiap kali, tiap
episode itu pasti ada sesuatu yang dibahas
karena kita lagi ngulik banget
tapi sebelum kita ke topik utama
saya mau share tentang
apa
kolaborator kita malam ini yaitu Dominisia
jadi kalau teman-teman punya
website
yang belum di hosting
masih di local host, hosting aja di Dominisia
teman-teman bisa pakai
diskon 10% untuk web hosting
promo codenya ngobrolin
main webdn Nah kalau yang mau main-main apa Cloud opencloud ya bisa pakai ya jadi bisa pakai itu tuh
bisa domenesia sekarang di VPS nya udah dikabarin nih sempat cetoknya pasitifnya sudah bisa nn8n
kalau nggak bisa di kayaknya sudah bisa karena neva cloud sudah bisa di domainnya sudah bisa ya
n8n dan sudah bisa juga ya karena VPS Open Cloud ya paling cocok jangan di install ya
lebih aman ya betul Jadi kalau misalkan mau coba-coba apa sih itu Open Cloud apa sih
ini sama istri
barusan
sponsor tuh sponsor
kebetulan
gak disuruh
jadi kalau teman-teman
mau coba ya ada diskon 50%
50% loh
cloudvps.dominisia
itu promo codenya
pake aja ngobrolin vpsdn diskonnya berlaku untuk semua paket semua siklus bisa dipake lebih dari satu kali akunnya nggak usah diganti nggak usah pakai email baru pakai email yang sama aja
itu bisa dapat promo 50% saya keman pakai juga buat acaranya Dominis ya saya hosting di sana
jadi sama ini loh kalau tinggal kalau pasang opencloud tinggal kayaknya nyampe gak nyampe
150.000 rupiah ya kalau main-mainnya kimi kan 0,99 tuh anggap 1,99 kalau kalau udah capek banget
nggak dianggasi jadi 2,2 dollar plus harga VPS berapa sekarang kalau udah dipotong 50%
kalau nggak salah 150.000 bagi dua 75.000 jadi cuma 100.000 udah bisa mainnya Open Cloud
Open Cloud, menarik sih Open Cloud.
Menarik.
Nanti lah kita bahas tentang itu ya.
Tapi sebelum itu ya, terima kasih buat Dominicia untuk kolaborasinya malam hari ini.
Dan malam-malam selanjutnya mudah-mudahan ya.
Dan kalau teman-teman ada yang pakai servisnya Dominicia, tolong kita dikasih tahu.
Jadi kita bisa kasih feedback juga ke mereka bahwa penonton-penonton kita ternyata banyak juga yang pakai dominisi ya
Thank you
Oke malam ini kita akan bahas tentang animasi
Jadi di web itu biasanya kalau mau menarik ya
Itu biasanya ada, sebenarnya ada beberapa ya
Ada beberapa kategori atau beberapa tujuannya lah
misalkan ada animasi untuk interaksi misalkan micro animation lah istilahnya gitu ya
terus misalkan kayak button hover gitu tiba-tiba ada ting gitu kan
atau ada geser warnanya berubah untuk on hover dan lain-lain
itu kan termasuk animasi tapi yang micro lah ya jatuhnya ya
terus juga ada transition antar satu page ke page yang kedua kayak view transition itu masuknya jadinya animasi juga kelihatannya
walaupun sebenarnya itu transisi ya istilahnya
terus ada yang scroll driven yang bisa di scroll gitu kan yang suka di demoin sama padika tuh
yang kayaknya yang saya takjub dengan animasi yang scroll driven itu adalah di website nya Apple
karena itu ininya mereka kayak
apa namanya
kayak sebuah
trademark
bukan trademark lah, jiwanya
situsnya Apple, setiap kali ada produk baru
Mac mini lah, atau Mac lah
atau iPhone, setiap kali kita
scroll
produknya bisa
beranimate
sesuai dengan konteks
di page itu
jadi kita bacanya pun jadi kayak
kayak presentasi jatuhnya ya bukan kayak halaman web ya kayak video kali ya kayak video ya
masih ada sekarang yang di Apple enggak kan masih
Nah disini teman-teman ada yang pakai nggak sih library-library untuk animasi kalau ada
boleh di-share pakai apa dan di-share juga pengalamannya yang mana Oh ini kali ya salah
produknya aja klik aja MacBook Pro 14
landmark ini lebih motion gak nih
Oh iya reduce motion dulu ya
reduce motion nyalain eh nggak nyala kan
lagi nggak nyala ini
ini ya itu turun lagi turun lagi
turun lagi
Oh iya bener
Cakep ya
Ini saya sambil scroll
Oh jadi ini
Perkenalan M5 ya
Kalau di scroll
Ini animasinya
Terus apa
Kelebihan utamanya apa
Wah 6 kali lebih cepat dari M1
AI nya
AI nya
Oh jadi ini peruntukannya buat AI ya
dan game ada tenser dia ada tenser library nya khusus Oh saya taunya dari whisper whisper.cpp
ada kalau si library si M5 M series itu namanya metal untuk Oh ya metal ya ya ya benar-benar
terus di metal setting itu ada tensor Nah karena saya punya nya cuma M3 nggak bisa pakai library
yang tenselnya itu hanya bisa M5
saya baru merasakan M1
sekarang sudah M5
oke, nah ini salah satunya
GSAP
GSAP itu dulu namanya Green Shock
kalau tidak salah ya, dan dulu berbayar
terus habis itu mereka diakusisi
sama Weflow dan akhirnya dikasih gratis
enak ya?
ini cakep ya kita bisa bikin slide dari sini
tinggal kasih sama video si Anfu pakai ini enggak ya Oh ya digabungin sama ini kali ya
udah pakai ini apa pakai satu lagi yang si framer Oh iya ada framer motion yang ini ya
ada dua dulu ada juga sih lebih animasi ada dulu saya sering apa melihat ini anime.js
anime.js ya betul ya anime.js ini bukan komik ya tapi animasi engine
kalau 3ds lebih 3ds ya 3ds ya kalau 3ds lebih ke 3d ini buat animasi
tuh cakep banget sekarang perasaan dulu anime.js cuman buat yang simple-simple kayak scroll terus
yang buat fade in fade out sekarang udah super canggih ya Iya udah lama banget nggak ngikutin
Oh ternyata ini nasib backend begitu tuh
tapi kita masih coba ya sebagai sebagai apa namanya orang yang berkuar-kuar untuk
Hai performance performance animation itu sebenarnya performance Killer
dan secara US kalau too much animation juga jadi ilfil ya Iya apa sih semuanya goyang-goyang gitu
ya ya ya ya secukupnya aja sih sebenarnya tujuannya ya satu ya buat feedback jadi misalkan on click
atau yang tadi loading state gitu ya ada perubahan state misalkan kalau sekarang kan serba SPA
single-page application jadi misalkan ada email baru kalau misalkan tiba-tiba emailnya muncul di atas gitu kan
kalau tidak ada apa-apa gitu kan user bisa jadi nggak notice kan mungkin diganti warnanya dulu
atau ada tulisan ada label new gitu kan terus munculnya juga dari bawah ke atas misalkan gitu atau gimana yang menarik ke atensi dari user
salah satunya itu sih
dan terakhir ya pasti
mata kita cepat menangkap sesuatu yang bergerak
udah itu ini ya
ya berubah warna bergerak
ya gitu lah
jadi sebenarnya enggak mesti harus kayak seheboh ini ya kalau ini mungkin lebih ke mau bikin jadi
kayak zaman dulu ya teman-teman ngalamin gak sih kalau zaman-jamannya itu makromedia flash bikin
website yang animasinya gila-gilaan gitu Wah itu jaman itu kayak itu ya kayak apa tuh namanya ada
iklannya yang di video apa tuh yang seorang yang lagi nge-launching sesuatu dia pencet ke
TV gitu ya 3 doang dia pencet terus itu video bukan beneran video hahaha
oke oke berarti beda kayaknya nggak ada yang ngalamin ya Ivan dulu ngalamin
gak sih makromedia flash bikin-bikin website gitu dulu saya inget banget
tapi harus loading dulu kan karena syf-nya harus di-download kan dulu
jadi sambil loading itu ya kita animasi habis itu nanti itu sangat tidak ini ya
accessibility sangat tidak bagus ya karena disatu frame pernah bikin jaman waktu kuliah
saya pernah bikin website pakai makromedia flash kok jadi memang jadi aplikasi-aplikasi yang
lucu-lucuan SPA kan jatuhnya kan SPA jadi kayak iya jadi satu aplikasi single-page application
bisa tuh di di download berarti menjaga terus kalau diklik ya Nah zaman dulu itu saya baru
ingat ini yang jadi acuan namanya orange dan padahal dibaca orang Edan gitu ya Iya
dari zaman dulu dipakai flash saya baru cek tadi ternyata masih ada websitenya dan ini
dan bukan flash lagi ini
ini jaman saya kuliah dulu
ini udah
populer ini
tapi dulu gak kayak gini ya
dulu gak kayak gini website nya
dan itu gak ada apa-apa website nya
cuma gini doang
ini kayaknya
sebuah perusahaan dari tahun 2000an
2000-2025
ini memang
padahal orang edan ya
kayaknya sih
namanya lucu Iya mungkin teman-teman gak rilet ya karena enggak ada yang hidup di jaman dulu banyak
game loh game lucu banyak banyak Iya karena dulu JavaScript dulu nggak bisa nggak mampu jadi mau
nggak mau kita harus menggunakan terparty salah satunya flash ya jadi ada beberapa ya ada anime
terus ada tadi
framer motion yang cukup terkenal
ada gsap tapi juga
kalau misalkan teman-teman mau
animasi yang sederhana gitu ya
gak terlalu
gimana-gimana kayak gsap gini
atau kayak framer motion
atau bahkan kayak anime
itu sebenarnya
sekarang udah bisa kan
pakai vanilla javascript atau
bahkan css doang kan
keyframe
ya itu animation
transition kan positioning library animation ini dimana karena secara web API sudah mulai lebih modern kan sekarang kan Iya sih udah banyak yang disupport ya misalkan kayak button
apa button on click atau disable enable itu aja pun dari CSS juga udah bisa kan sebenarnya
nggak butuh kita nggak usah pakai library ini kalau hanya sekedar anime-anime yang
sederhana ya micro interaction kayaknya masih bisa di handle sama CSS atau JavaScript anila kali ya
tapi ini kayaknya pada bikin apa namanya kayak game web interaktif misalkan buat dekorasi buat
interior gitu bisa yang bisa di rotate mungkin gitu ya
Hai coba aja klik satu yang lucu tutup school mana tutup school deskripsi
Hai ini apa yang dianimasi Hai bentar masih loading
Hai lama-lama juga ya Iya lama juga lebih cepat ngobrolin wc eh eh eh eh eh eh eh eh eh eh
fun thing studio
Yes Yes call jets book of life ini animasinya yang belakang
Hai kek traveloka bisa-bisa diapain wuih skoran vision
skoran vision Wih cakep udah keren banget
serius nih keren banget Nah kalau ini kan nggak bisa kan pakai SSI paskipan hilang nggak bisa eh
Scroll animationnya bisa, tapi sampai segini, kayak sedetail gini sih gak nyokap.
Tapi sebenernya bisa sih, zoom kan sudah bisa juga, zooming objects segala macem.
Bisa ya.
Bisa tapi su-
Ini gak tau ya, buahnya aja mungkin skill issue gak bisa.
Effortnya, ya effortnya mungkin terlalu tinggi kali ya kalo harus pake vanilla semua.
Ada saatnya kita harus pake library ya.
Jangan semuanya vanilla.
jadi kayak website-website yang butuh interaksi interaktif gitu ya sama visual itu sangat ya
mungkin di beberapa Circle ya kayak misalkan jualan tiket konser gitu ya mungkin itu perlu
tapi ini ada speaker
apa ini
oh ini conference kali ya
iya
AI native
dari semua tulisannya
yang gue ngerti AI native
open source
ini video
ini video tapi
ini animasi apa
transisinya sedikit ada
animasi ya
keren ya
Kenapa butuh animasi ya buat menangkap ini ya memberi atensi activity lebih fit experience lebih
tepatnya ya kalau experience bagus ada hubungan sama branding juga ya betul betul ya tergantung
tergantung target user nya juga
kalau target user nya mementingkan visual
misalkan tadi tiket pesawat
bahkan ini tag kan
kayaknya tag conference kan ya
event conference kan
tapi ini animasi juga
visual designer
juga visual designer ya ya ya Hai saya Apple dia sampai bikin website nya eksklusif seperti itu kan juga memberi kesan
mewah kan ya
ada misinya, kalau misalnya kayak
produk mahal tapi website nya
biasa biasa aja gitu ya
kerasa biasa gimana ya pasti
orang gak relate
dengan experience
yang di dapatkan
Ini website nya Apple yang dibikin pakai yang sempat viral itu nggak sih?
Saya lupa.
Sempat viral kan?
Websitenya gede banget ya.
Jadi kayaknya nggak cuma satu sistem deh.
Jadi setiap kali menu-menunya itu bisa jadi microapp juga.
Microfrontend ya.
Ini satu app sendiri.
Maybe. Saya nggak tahu ya di mana ini.
Tapi kalau landing page mah kayaknya nggak deh.
Masa sih harus microfrontend?
bisa jadi beda tim Oh ya ya i don't know kalau saya di Apple
mau dong apply saya
tinggal pakai itu aja si Claudia nya Mas Riza
mana bisa motion one ini saya dapat juga nih dari motion one ini rekomendasinya ya udah
arsena sudah si Claudia kris dark FB Kenapa diangkat enggak ada alasan
Hai tuh Hai terakhir update dua tahun yang lalu udah loti itu isu mungkin isu repositor
online roti-roti sekarang lagi banyak lagi banyak juga pakai loti do maksudnya ini
Master dan Loti Animation
Tapi sponsornya Salt
Mana Loti?
Ini
Bawah bawah, Loti Files
Oh Loti Files namanya
Oh
Kalo ini sifatnya embed
Ini sifatnya embed
Embed itu maksudnya gimana?
Embedding, kayak Twitter embed
Kayak
Instagram, jadi mereka udah bikin
Jadi yang bisa dibikinin jadi bisa keren loh
kalian loh masih kayak kayak ya grafik bisa animasi kayak gini bisa di itu ada gojek tuh
tuh jawabannya tuh powerpoint.com namanya dot loti
jadi tadi Iwan nanya kan apa namanya kenapa butuh animasi itu optimal performance and
user experience
tapi Gojek bukannya bukannya pakai native ya enggak pakai web ya
ada service gojek yang bisa diakses lewat web enggak enggak kan ini native kan tuh yang ini
Hai yang ini kan aplikasi native
Hai baby bisa jalani native apa jangan-jangan ada yang native Oh iya kayaknya ada deh bisa
karena dia dia kayak file sendiri jadi kayak Oh iya benerin dia punya runtime to doti.com
Oh oh ngerti-ngerti Oh kayak flash juga jadinya ya
Hai tapi beda engine jadi nggak perlu download ya kita harus download
kan suef playernya ya ya ya masing-masing kan betul
Oh ini ada yang pengalaman nih Mas Muhammad Farhan lhoti bisa custom
sendiri di webnya lalu export.com atau Jason Oh jadi disediakan ininya ya
kita animasi pakai editornya layak gitu ya pakai playernya terus habis
download terus habis itu kita bisa jalanin di website Wah menarik ya
Hai ini ya platformnya ya ada kreatornya
Hai uh seru iya Wow tuh bisa bikin begini tuh kan kan keren kan Oh jadi kayak bikin iklan ya
iklan ya bener salah satunya bisa bener kalau yang di tempat yang klien saya buat itu dia buat
infografik buat hasil pemilu salah infografik infografik tetap tentang kondisi pemilu saat itu
Jadi masing-masing ada penjelasannya dengan Lottie file.
Itu yang saya ingat.
Ada lagi yang namanya Flower apa gitu ya?
Menarik ya. Ini image ya? Berarti ini GIF gitu?
Eee... iya. Kayak GIF tapi bukan. Lottie file. Lottie.
Oh, ada encoder sendiri berarti ya? PNG?
Iya, dia punya engine sendiri ya.
Coba aja cari contoh yang live-nya.
Sample, Lottie Sample.
Cari aja. Itu tuh tadi, tools, customer.
customer itu build with lotis itu paling kanan bawah iya
Google AI itu
AI lagi
visit website
Hai e-idol Google Hai kayaknya ini ini roti ya coba klik wow
Hai SPG Oh iya loh container-container SPG Oh oke oke jadi lebih lebih nanti perasaannya kan jadi
ya seperti saya bilang di embed terus di jalan runtime nya sendiri di web
untuk ngeanimate ini
ini menarik sih yang terutama yang ada creator bikin
yang bikin loti file nya sendiri itu menarik karena selama ini saya mencari-cari apa ya
motion graphic motion graphic kayak gini
ini maksudnya yang simpel ya yang dua-dua dimensi tapi enggak serumit kalau produknya Adobe apa tuh
yang buat motion mesinnya motion yang buat bikin animasi sudah anak after effect Iya tarif itu kan
terlalu rumit ya Saya pengen yang simpel-simpel aja kayak menjelaskan misalkan gimana proses
request response gitu misalkan kayak di apa di slide atau dimana gitu pengen di pengen tahu
ada tools yang kayak gini juga ternyata ada iya karena kita ngomong motivas satu lagi yang saya
disuruh oleh klien untuk integrasi juga florist to the florist.studio
Hai lebih satu lagi saat yang masih klien yang sama satu dia menjelaskan tentang tentang
infografik dan macam satu lagi dia Oh ini bukul kan datanya memunculkan datanya pakai
Flourish lebih khusus untuk animasi-animasi buat
Data ya menampilkan data
Chart data
Lebih indah daripada Chart.js
Oh iya ini salah satu use case juga animasi itu bisa dipakai untuk menampilkan atau meng data lah gitu oke kayak
vibe-nya itu kayak D3 ya
kayak D3 kayak high charge tapi Flourish ini embed juga
Oh modelnya sama kayak kalau kita bawa jasnya ke tempat kita kita build di sistem kita kalau
Flores mirip kayak loti jadi kita nge-embed dia aja Hai bahwa masih begini pernah pakai di Flutter
buat nyalain lampu kamera gerakan frame nya bisa di reverse on off sini Jason Oke ini Mas Yogi tadi
website yang pakai gshp
nanti kita lihat ya
boleh di share ini ya
di share pengalaman penggunaan gshp
saya belum pernah soalnya
terakhir tau
green shock itu
sempat tau ada
buat animasi, buat charting
terus tiba-tiba
denger berita
dia diakuisisi terus dikasih gratis
gitu
cuman baru sampai situ sih
learn nya mana
unlock the power of gas
oh video ya
getting started
install
nah abis itu saya lihat video ini
video ibu-ibu ini
oh banyak ya
dia ya
kita tinggal pilih ya
bisa mau semua atau
salah satu ya
misalkan kita mau bikin game
kita bisa pilih satu
ini agnostik kan ya
gak berhubungan sama
library lain
kalau motion kan react kan
react
motion bisa
bisa vanilla
karena saya pakai di astro saya
oh
menarik
halo
clean boys
ini kok bajunya familiar ya
ya ya ya Hai rubah dari mana tuh kayak baik itu yang sering saya pakai
kayak gitu kok sama bajunya
kayak GitHub GitHub kan bukan rubah kita octopus-octopus
firefox yang bahaya firefox Oke
mana disini ada demo nya enggak enggak ada ya dia kasih video doang ya Masa kita nonton video sih
Hai web demo itu Scrolls Reader karya demo-demo
Hai menentu saja demos Oh iya
Hai nah demo all demo Hai kursor tep-tep trail
wiggle your your mouse around eh gimana Oh ini belum ya review mode
begini ini lebay nggak sih lebih demo ya Iya ini demo kalau ini kan bintang-bintang atau
kalau lagi acara-acara Oh kita bisa gitu kitlet mungkin lagi kalau gonya apa yang dekat malah
imlek mungkin pada belakang barang say gitu jaman dulu banget kayak zaman-jamannya Friendster
hahaha
nggak ada yang tahu disini Friendster
oke preview ini apa restart reverse scrap pin Oh bisa ganti kalau over
Kalau pindah-pindah.
Apa namanya? Kursornya pindah.
Terus, make OS dock effect.
Bisa ya?
kalau mau bikin saya tahu bikin operating system web operating system simple animation kita coba
lihat ya twinners ini kan buat jangan Oh kalau on ini ya klik ya tuh bisa lagi sekali doang
kita lihat kodenya ya
box-nya
oh ini kan dia panggil box ini kan
posisi X-nya berapa
rotation-nya 360
oh ini menuju ke
dari kotak ini menuju ke sini
ke X200 ya
rotasinya
360 scale 1,2 kalau kita bikin misalkan 2,2 jadi gede dong gimana dia animasinya Oh nggak jalan
Hai harus dipel dulu Hai lebih langsung harus lihat rantai itu udah orangnya itu buatnya
nah udah Hai Woi gede-gede terus habis selesai dia back out the outnya mana udah
kan dia balik-balik posisi balik gitu repeat satu kalau repit 10 berarti 10 kali gitu ya
kok kayak gampang ya cuma di s.p.do to doang segini doang nih yang justru kalau ada justru
karena ada library begini untuk mempermudah jadi bisa dimasukin ke
kita tinggal bilang AI nya mau bikin animasi kayak gimana
oh iya zaman sekarang
sudah lebih gampang ya
mau belajar juga gampang ya
kalau kita gak ngerti tinggal tanya
saya mau gini
gimana cara implementnya
oh iya make sense yaudah implement deh
yang kerja dia
yang kerja si AI ya
luar biasa
kembali ke kebanggaan beli-beli mulai lagi ini iya dong yang kita mau bandingin sama
framer Oke keyframe respons anime kita saya diperlu mention juga loh ini karena
gsm ini kan Kenapa bisa muncul ini karena dia sudah mau Open di udah di open di open
di-resource kan oleh dengan syarat dengan syarat produk yang kita buat tidak compete dengan webflow
jadi kalau mau bangun no code ya mau bangun yang sama dengan webflow nggak boleh pakai jpsp
Oh oke
Apa yang menariknya
Contoh-contohnya
Extreme-extreme semua
Jadi susah memahami penggunaannya
Apa
Ini buat toggling doang
Begini
Gak ada
Micro
Ini ya
Contohnya di bawah tuh
itu kan build with flow tuh
coba
eee
eee
eee
apa ini
apa ini
sama datang baru bisa nyambung karena kita orang bikin ngomongin frontend nah gue juga nggak ngerti ini tapi kanvas enggak kanvas ini bukan kanvas
animation-animation library aja
ini react ya
just the button to toggle a timeline
weh weh nama kayaknya cuma kayak jasad timeline tuh tuh reverse itu doang ya
terus ada timeline box nol itu X nya berapa rotasinya mau muter berapa kali
box satunya dari
X-nya minus sekian, rotasinya
kebalik, dan seterusnya, dan seterusnya.
Udah.
Segini doang ya.
Nah, terus
kalau gue malah mikir
dari, yaudah kalau ini sih
oke ya. Terus kayaknya
G-SAP itu salah satu yang
apa sih?
Establishkan library yang
dari dulu udah ada.
Nah terus tiba-tiba sekarang ya bukan tiba-tiba ya kan kebutuhan animasi sebenarnya animasi simple
ya ini animasi UI yang simple ya kebutuhan itu kan udah ada puluhan belasan tahun ya itu udah
sold in a way sama library kayak gini terus tiba-tiba muncul view transition nah agak
dilema juga ya maksudnya mau sebetulnya kalau mau perfect maksudnya performance misalnya cara
kerjanya kan lebih pasti lebih oke view transition lah tapi prakteknya kalau harus rewrite semua ya
pasti males juga kan orang-orang yang kebiasa udah terhancur kebiasa pakai ya library kaya motion
kaya gsap itu ya pasti kalau tiba-tiba suruh melajarin sintaks baru lagi mungkin agak males ya
kenapa Ivan jadi ada ide sederhana kayak misalnya kita punya membership kan membership site atau
punya situs aplikasi yang ada membershipnya jadi button untuk cancel membershipnya itu
begitu orang hover mau dihover dia pindah ke tempat lain gitu kan jadi pernah pernah tahu
ada yang bikin kayak gitu bisa cancel bercandaan dark pattern ada yang bikin cuma kayak
do you want to cancel your subscription? are you sure? tapi kalau itu triknya macam-macam sih ada
yang kayak confirm terus kayak harus ada captcha cuma captcha nya sulit banget cuma salah satunya
nggak itu mau diklik gerak masih enggak dibikin animasi kalau klien nggak bayar ya Oh ada yang
bikin di-fade out siapa ya dulu ada kan ya ketweet jadi kayak apa bikin kalkulasinya pertama
kurangin ya semakin lama nggak bayar semakin
ada feedback nih ada feedback Ivan katanya suaranya agak kecil
ya thank you thank you terima kasih tadi mau apa Eka kan tadi sebutin view transition tadi kita
sempet bahas jadi tipe-tipe atau jenis-jenis animasi itu sebenarnya ada beberapa ternyata
ada untuk micro interaction misalkan button klik terus loading gitu ya ada buat transition ada buat
animasi jadi animasi sama transition itu mungkin mirip tapi bisa dibilang ada perbedaan kalau animasi
misalkan kayak tadi di halaman ini ini animasi bukan transisi kan transisi kan antar page
kalau page transition ya maksudnya ya oh enggak view transition yang level 1 itu ya buat use page
kayak gini apapun itu pokoknya jadi namanya emang agak misleading ini karena dulu pernah
talk view transition dua setengah tahun yang lalu pas masih belum ngetrend jadi emang itu salah satu
hal yang misleading karena di transition itu eh eh apa sih kodenya kita mau ngedefine gerakannya
gimana itu pakai CSS animation bingung nggak lu Oh iya iya jadi animasi kalau transisi itu kan cuma
kayak from this to that kalau animasi animasi CSS keyframe keyframe kita bisa nentuin presentasenya
sama kayak hal-hal yang di-animate juga bisa banyak, maksudnya propertinya bisa macam-macam
yaitu view transition tuh literally nge-custom-nya ya pakai CSS animation
terus kenapa namanya bukan view animation? Entahlah
tanya mas Bremus
kalau page transition, kalau misalkan kita mau bikin kayak gini berarti
misalkan dari sini ya, ini state awalnya, page 1 misalkan
Pages 2-nya kita bikin gini, terus tiba-tiba dia bisa animasi kayak gitu, bentuknya kayak gini gitu.
Kalau antar page itu view transition level 2, jadi sebetulnya itu kayak ada dua hal yang mirip.
Mungkin maksudnya kalau teknologi di browsernya ya, cara kerjanya itu mirip.
Tapi penggunaannya beda, view transition itu ada level 1 sama level 2.
Nah kalau level 1 itu intinya yang client-side, yang browser only.
Ya kayak gitu tuh, kayak exactly yang di demo ini.
apapun itulah kita klik togel timeline itu kan boxnya muter-muter atau naik turun atau apa
Nah kalau yang level 2 disebutnya apa multi-page animation atau apalah pokoknya view transition yang
multi-page animation eh multi-page transition oh iya multi-page transition itu ngedetect
navigation event jadi cara browser menangkapnya itu kalau kita ngeklik kan sebenarnya ada event
fire ya navigation event kita pindah halaman Nah itu baru dia ngedetect gitu sih Oh oke jadi kalau
kalau yang kayak di halaman ini itu head to head nya sama view transition yang level 1 yang udah
yang udah baseline eh baseline atau belum ya pokoknya udah di support semua sudah-sudah
kalau ngomong-ngomong g-sub jadi inget ini nih ada apa ada sintaks FM episode podcastnya jadi
ada di geser itu ada defrel nya yang namanya Mbak Casey gitu ada di sini ada di sini ada
disini tadi kita udah lihat di sini bukan ke sini di cloud ya Nah mana ya ada punya
video-nya Oh karena ini kan orangnya pernah ya tapi apa obrolannya yang seru itu maksudnya
kalau orang presentasi sendiri sama ditanya-tanya kan lain kan Nah salah satu yang seru itu dia
di Sintax.fr Iya dia sampai bikin video apa video apa explainer itu pakai gsap jadi bukan pakai slide
udah segitunya apa tadi gsap yang ini ya
eh si Evan
cuma emang demo-demonya yang apa punya animation centric banget lah emang kayak
bikin wow banget itu salah satu area yang kurasa insecure karena belum mendalami maksudnya tahu cara kerjanya ya kayak Hello world nya cara bikinnya misalnya di Tentung Pestol harus bikin button ini muter gitu yang nggak usah di Tudung Pestol lah disuruh bikin button ini muter bisa tapi kalau buat orchestrate yang enak dilihat yang wow ada wow efeknya tau kan kayak ya itu kayak demo si ya orang Devrel GSAP itu nah itu belum bisa dan belum pernah mungkin harus mulai belajar
Belum dapat case-nya aja kali Eka.
Belum, karena semua produk yang dibikin di kerjaan,
semua straightforward,
emang gak boleh terlalu banyak flare.
Gak boleh terlalu banyak wow effect.
Mungkin perlu bikin project, belajar sama AI.
Kalau React Transition Group sama atau beda?
Gak tahu, belum pernah.
Apa itu React Transition Group?
Coba googling aja.
ini ada react-page-transition
oh ini page transition sama kayak tadi
itu nge-wrap doang mungkin
react-page-transition
ini beda
ini ada header
ada router
entar routernya apa
itu di atas
yang di atas itu ada boxes
di JSAP di menu di atas
boxes
klik
udah Oh kalau kalau school trigger Hai nah gitu tuh weh
kodenya gimana transition komponen apa ya Emang dikasih dari sana
switch transition on enter bisa per page jika pindah page nge-transition gitu yaitu dia
nangkep cara kerjanya sama dengan sama ya kayaknya nah terus kayak banyak hal lainnya
ya kayak di apa web plan itu kayaknya kan front-end web teknologinya baru bagus dan
maju kan kayak lima tahun ya tiga tahun empat tahun terakhirlah ya kayaknya yang ada fitur-fitur yang
beneran berguna bayangin dong kita baru punya popover sekarang baru punya view transition juga
belum lama ini nah kayak belasan tahun sebelumnya ya semua kan apa memenuhi gap itu ya dengan cara
bikin JavaScript library kan betul jadi ini buat memenuhi yuskes yang diperluin banget
hai oke ya cukup ya kita bahas gsap sekarang kita ke motion ini awalnya namanya framer motion kan
sekarang dia motion doang ya sekarang ganti nama ganti nama ya ini branding Oh ini saya pakai ini
Iya saya pakai
Dan
Ini pengalaman pribadi
Karena saya sangat concern dengan
Berapa jumlah
Javascript yang kepakai
Dan frameworknya
Cukup gede loh
Kalau full size nya
Bukan
Bisa trace checking
Jadi full size nya itu
Kalau semuanya diambil seabrek-abrek
Uncompress itu bisa 500 KB
500 KB
Setengah
Kalau semua
Semuanya
Library nya doang
Kalau gak tree shaking
Jadi
Akhirnya
Karena saya pakai
Kok ini
Apa
Meskipun sudah di tree shaking
Kok ininya saya
Masih gede banget ya
Masih kayak 90 KB
Gitu
Apa masalahnya
Akhirnya saya nemu
Ternyata ada motion
Mini
Jadi
Bisa
Bisa pakai
Yang
yang sub library nya dia masih tetap pakai package-packagenya tetap motion
tapi diimportnya dari yang mini jadi nggak dipanggil yang sangat berabruk
jadi lebih kecil sekarang cuma 40an 50an KB
kayak momen JS tapi ada yang kecil-kecil ya
iya
itu bedanya di browser support ya maksudnya fitur yang dipakai yang dipakai di halaman itu setelah diganti itu kan ada semua kan Ya
Maksudnya tanpa ngorbanin, jadi kayak bukan jadi nggak bisa pakai ini atau nggak bisa pakai itu dibanding yang fitur yang sama sebelumnya,
cuma mungkin browser support kali ya? Ya kayak momen JS juga gitu kan?
Iya, iya. Betul, betul.
Oh ini tadi ada pertanyaan yang kelewat
Kita ngomongin back end, front end ya
Struggle ke back end
Tapi yang dapat spotlightnya front end terus
Terus belajar front end
Bentar lagi back end, front end udah
Gak relevan semua
Kita semua jadi
Kita semua jadi
Prom engineer
Prom engineer
Jadi product manager kita
cuma nyuruh-nyuruh doang itu ide topik juga tuh kayak gimana karena dunia perkodingan
berubah banget kebek and front-end infra kayak itu semua definisi sama lingkupnya
bergeser kan semua orang back-end sekarang bisa ya bisa bikin front-end sebaliknya juga
terus nanti kita semua digantiin AI
kelar
terkena kelelih aja kita
motion
VSAP versus motion
itu perbandingannya ada tuh
tapi yang bikin perbandingannya
motion sih jadi mungkin bias ya
ya tapi gak apa-apa buat
dilihat
adoption licensing performance features features adopsi okelah motion kayaknya duluan ya
jstap udah lama tapi motion tuh yang yang eksponensial soalnya di kalau di apa ekosistem
JS, emang framer motion
itu kayaknya emang naik ya
sekian, ya 5 tahun lalu atau
berapa lah, segituan
gue juga pernah pake, gue pernah pake
framer motion, gak pernah pake, belum pernah
pake GSAP
MIT license
ternyata
oh mereka MIT license
oh
oh pantes
jadi lebih ramah
buat ini ya
boleh dipaket ulang
boleh package ulang bisa dijual lagi gitu ya asal book bukan asal dan dijual produknya bukan
mau ini ya library-nya ya ya ya sama pengaruh pengaruh nggak langsungnya di ekosistem developer
lebih banyak yang bikin tutorial dan apa sampel dan lain-lain kan ya sedangkan gsap close source
sekarang masih closed source, tadi kata Ivan udah di open
udah
gak tau, antara boleh pake
antara boleh pake atau
atau boleh ini
free to use, cuma mungkin source nya gak
free to use
GitHub, coba kita liat GitHub nya ya
nah itu udah
iya, berarti sudah open kan
iya, berarti itu artikelnya
kena license nya
gak ada license disini
Bawa kali di readme
Coba
Is GSAP open source
Wait wait wait
GSAP is free
To use
Iya berarti bukan open source
Nah tapi ada
Free to use
Bukan open source
Iya ini bukan open source
Iya
Free to use
Cuman bisa dipakai doang
standar no charge license
ada ya
baru tau
lama lagi buka standar
license doang
ada animasinya mungkin
masa ya enggak aku nggak cowok aku ngarang ya ini yang tadi ya kompetitif produk yang nggak boleh bikin yang seperti Webflow
kalau mau bikin kompetitornya Webflow, pakailah Framer Motion
iya
ya kan, pakai GSAP
Oke Wah menarik juga ya ini perbandingannya oke performance
is more than just smooth animation
menurut motion performa mereka lebih baik menurut minimal bundle size tapi menurut Ivan tidak ya
karena belum pakai gsap ya belum pakai gsap
coba lihat di npm nya coba lihat npm.js
buka tab baru aja tab baru npm.js npmjs.com
coba lihat gsap dia banyak kan yang utamanya aja
aja ya turun-turun sampai size 6,26
Hai frame kalau frame kalau motion tadi 500 kilobytes cuma motion ini kalau minifight
620 ya masih masih besar juga sih jauh batin lebih lebih rich animation si si j-shape Iya
terus dia hardware acceleration
apa bedanya nih? oh block javascript
oh kalau block javascript yang di block dia tetap bisa jalan
karena pakai CSS mungkin
coba
nggak tau, klik aja
ini apa? coba ya
to illustrate in the following example the ball on the left is animated with motion
and the ball on the right is traditionally animation library press the block JavaScript
button to block JS execution for two seconds Oh dibikin sleep ya di set time out Iya Iya
terus gimana?
kok gak ngaruh?
ngaruh, yang ini berhenti itu
oh
ya itu buttonnya
gak dikasih state sih
iya
jadi katanya
di browser
yang umum
yang major itu
pada umumnya
bola yang sebelah kiri
terus melakukan animasi
sedangkan yang disebelahkan walaupun websitenya jadi and respon sih Oh jadi di blog itu maksudnya
blog bukan ya kayak wild wild truk itu di semuanya enggak Oh bikin sibuk bikin sibuk
dia mendemonstrasikan bahwa cara dia cara motion menganimasi itu enggak jalan di main thread
ya betul sih dia pakai request animation frame berarti di level rendering bukan di level JS
jadi poinnya threadnya terpisah enggak mengganggu apapun aktivitas main thread
ya intinya ini ya
oke scroll animation juga lebih bagus
startup times
oke
call start
oke
ini saya penasaran apakah
di motion.dev itu dia
akan ada
gshp yang menang
gak bakal ya semua
kayak comparison
apalah framework itu next.js
atau berat tubuh atau apapun kalau di halaman landing page
bercat itu kan pasti mereka yang kenal
iya
kita bikin yuk framework
tapi ini
lebih lambat dari semua
gane pake
ada nanti namanya itu
yang apa
yang bikinan Indonesia
itu yang kayak
muliono.js
prabugu
prabugu
dibikin lebih lambat semuanya gitu web framework yang tidak terlalu cepat kalau mau cepat
kenapa ini dibuat ya biar lucu aja gitu ya
feature-feature
tinggal pakai motion.div beres
oh sistemnya gitu jadi misalkan dari div tinggal tambahin motion.
habis itu tambahin property-nya gitu ya
jadi bisa di komponen level ya sedangkan gsap itu harus di javascript level
impor-impor macem-macem
ada hubnya
oke
wah menarik
lebih ramah
developer
lebih ramah untuk anak frontend ya
berarti ya
wow
perbandingannya
GSAP paling jelek nih
hahaha
ya anime-anime itu tadi anime.js bilang ya motion yang ini ya motion Oh yang ini yang mini size ya
jadi yang yang subnya ini gue pakai sekarang anime dari apa motion yang versi mini itu size cuma dua
habis baca ini tuh ada beginian setelah baca beginian baru instruksikan si coding
agennya pakai mini aja gitu akhirnya dia roba semua harus masukin di rules itu atau
skill status macunda sudah besok lagi ambil yang besar lagi dokumentasi udah di udah dibenerin
kita jadi pakainya simpel-simpel Iya kerja aja nulis markdown sama nge-review markdown
akhirnya skill bukan prom engineer gua prom monkey
skill baca dan tulis bahasa manusia akhirnya kepake lagi syukurlah
Iya apa materi kuliah di kampus kepake ya Eka ya enggak sih sih hanya nggak bisa dikasih puisi
puisi-puisi yang gitu sastra-sastra Jawa sastra Inggris gitu ya gue kuliahnya sastra Inggris sih
Oh berarti gak ada bahas kayak tenggelamnya kapal Van Der Wey kayak gitu-gitu
Bahasanya Shakespeare
Hamlet gitu
Oke
Nah tadi siang tadi sore
ada yang ngepost siapa disini tadi yang masih Oggy dia ngepost ininya portfolio nya
kita lihat portfolio kecil saya varian saat ini GSAP combat style hit tiga kali langsung
keluar jurus kultivasi God Emperor tapi keren sih website sih keren sih itu animasinya ya Welcome ada introduction Oh ini Scroll animation ya apa tadi diklik tiga kali dimana klik tiga kalinya ini
kecil thing game gitu ya ada Oh iya bener bisa klapausius enggak atau Rosebud infinite
manichi gede ini keren banget maksudnya ini temanya tema terminal gitu kan terminal kayak
metriks gitu kan warnanya ya kita game deh terus ada itu itu kayak side-side apa sosialnya di
kanan tuh Oh ada suaranya juga eh nyalain dong kedengeran ya harus share tab baru bisa kedengeran
Mari kita share tab dulu.
Hah?
Share.
Kalau share desktop gak bisa ya?
Gak bisa.
Chrome tab also
enable audio.
Oke. Tuh ada suaranya.
Kedengeran gak?
Enggak. Suara keyboardnya yang kedengeran.
Perlu digedein gitu.
Gak kedengeran ya?
silahkan buka sendiri yogideveloper.com
terus gimana itu tadi yang kayak kayak perang itu mau lihat
di bagian yang mana
coba kita baca lagi ya
varian saat ini
gshp combat style hit 3x
langsung keluar jurus kultivasi
yang dimana
dulu sempat nyerah ngulik gshp
tapi sekarang berkat bantuan AI
akhirnya bisa
juga
imajinasiin file
.frag dari top 10 gshp web
untuk animasi gara-gara gshp jadi
20 git pull request isinya cuman modifikasi
gshp tiap hari ganti
Oke nah itu berapa token itu habis berapa token tagihan apa extra usage cloudprone nya berapa itu
tapi bentar mana yang di tiga kali gue juga mau 123 oh enggak activity belum ngaruh
buat ngaruh gimana yang klik sekali finding enggak Oh ini nebel heker kompeten ke bawah
kanan ya iya iya enable hacker combat animation eh lucu keluar itunya keluar apa search Odi itu
tembak-tembak dia nyatanya pakai tujuh-tujuh
gimana cara tembaknya?
di kanan
spasi mungkin?
enggak
spasi nggak?
kirain kayak jumping dino gamenya chrome
pakai space drop
enable romance sky drive
eh eh eh eh eh lo
siapa yang ditembak?
oh my trips
terus klik 3 kali ini di mana?
cuman penasaran sama klik-klik aja ya bagus sih cuma enggak tahu cara pakainya ini di
maksudnya ini random move atau ini kayak atau dikontrol nggak ada
nggak bisa ya ada skenario itu
entah kalau baik-baiknya posisinya sih kayaknya skenario ya kayaknya skenario ya udah dibikin
nanti dia akan ke sini terus dia akan nembak gitu ya tapi ini keren banget
ya paling itu typo solve kenapa ada S atau mungkin sengaja biar unik Banyak problem banyak problem di solve Ya SD di problem set Jadi problemnya satu tapi menyelesaikannya banyak
Ya gak bisa.
Menyelesaikan berkali-kali.
Asalnya dipindah tuh dari belakangnya solve ke problem.
Keren banget ini mah.
Keren, keren. Ini bikinnya berapa lama ini?
Oh tadi pake AI ya?
ya itu tadi kan dia bilang tapi udah sekian hari berhari-hari saya mau cari combo nya nih nggak
ketemu ya Nah itu paling kritiknya kalau lagi apa yang yang shooter mode nya nyala itu sih
teksnya dibikin nggak bisa di-select nggak bisa select aja Iya kalau kegiatan ya Iya
nggak ganggu pas ngeklik-ngeklik itu malah select text pakai pointer events non
Hai pointer events non-word was all Hai nih ngerjain begini nah harus passion ini namanya
passion dan vision wuih sabar dengan senang ini Desainnya bagus banget sumpah serius ini bikin
sendiri apa ada template atau gimana kayak nggak percaya gitu atau minta minta problem
kalau bagus kalau bagus kalau minta pro
bentar masih aja nggak nih kita udah ada mungkin lagi AFK lagi nonton bola kali
katanya lagi menang lawan Jepang yang mana emang ada Indonesia jalan Jepang
lagi nggak ada International break kali Asian Cup Oh kalah enggak enggak enggak enggak tahu
kapan enggak ada ya ada Indonesia lawan Jepang 53 futsal futsal AFJ futsal futsal
Oh nggak ngikutin Oh ya nih Captain Jepang masih terpukul di sini kirkan
tim nasional Indonesia yg loh bukannya Jepang menang Indonesia kalah katanya Indonesia kalah
kita menang futsal futsal menang menang kalah 35 kita menang Oh oke oke cukup ya
oke minggu depan bahas apa oke udah ini belum udah puasa 17 belum belum belum
18 kalau nggak salah setelah tiba-tiba ngedo Oh iya Eh kan belum ditentukan harus lihat
hilang salah tadi kalau nggak benar kalau nggak bener sama ya mau jawab ya itu kayak kayak wild
Oke yang ini kita close dulu ya ya ya biar eh udah di ini belum di repopulate
sudah sudah otomatis coba aja dia jam 7 dia sudah repopulate
Oh iya ya ya udahlah kalau ke pilih lagi ya tinggal di roll tinggal Spin lagi kerennya
Mbak Spin tuh sama aja sama aja cuma habis lihat tadi yang yang ini terus ke sini nanti
kita kita kita suruh aja wainya ngeliat situsnya Yogi terus kita suruh tiro udah oh iya bener bisa ini sama pick random sama spin the wheel
enggak beda kan
storybook
spin the wheel ada
kalau spin the wheel ada ini
udah ya
kalau pick random langsung
eh bentar, pernah gak ya?
pernah, episode 136
Udah ya? Berarti di-close dulu ya? Ini udah close. Berarti populetnya semua ya? Tidak close ya?
Oke, next. Oh nggak bisa ya? Oh bisa.
Dia challenge sendiri tuh.
Stack dan tools sehari-hari.
Boleh, teh.
Mau.
ya paling opencode cloud code kodex di ai-ai film supercode ghost ghosty ghosty timaks ya
Oh ya boleh ya kayaknya seru ya bahas-bahas ya gua doang yang enggak canggih stek ya udah
apa sih? VS Code, bukan soal canggih-canggihan. Ini kan belajar satu sama lain.
Cuma maksudnya apa, paling nggak menarik, maksudnya paling predictable.
Tapi ya nggak apa-apa.
Zaman sekarang mah pamernya bukan itu, pamernya token berapa.
Pamer CloudMax.
Pamer CloudMax.
Kalau CloudMax itu nggak ada barang mingguan ya? Nggak ada yang penuh rata kanan?
Ada.
CloudMax ada. Ada weekly limit sama.
Ada. Tetap ada, cuma nggak segampang penuh.
Siapa bilang? Kalau sudah pakai agent multi-team, cepat juga penuhnya nih.
Iya, cuma mesti dibanding kalau pro.
Iya.
kalau multi-agent baru apa baru main agennya baru begitu bro abis menurut saya kalau pakai
Pro hangga gak cocok untuk coding agent jadi seperti kayak pakai pakai cpt aja buat nge-chat
soal apa namanya exploring sama-sama chatting chatting aja seperti kayak pakai cpt Gemini web
khusus hanya untuk nanya-nanya aja baru 10 dollar gak gak itu ya nggak bisa ngapa-ngapain lagi
kalau pakai opus ya hampir-hampir bisa ya bis opus lu juga kurangnya
kurang emang ada $10 yang antropis ya 20 20 20 pakai code kalau cuma kalau berkali-kali kita
bikin akun kloningan sampai banyak konon katanya di band sekarang ya mereka bisa tahu ya ya mungkin
deteksi IP IP atau GitHub sama session-session Hai sama session-sessionnya satu di folder
Kalaupun kita ganti
Oh iya di laptopnya ya
Ketahuan
Ini ya berarti deal ya
Deal
Veto ya
Alright kalau gitu cukup
Cukup
Terima kasih buat teman-teman
Semuanya yang sudah meramaikan
Kita ketemu lagi minggu depan
Selamat malam
Bye bye
melihat tayangan dan halaman ini?
Atau mungkin telah kesekian kali melihat
untuk membandingkan kembali dengan lainnya?
Jika Anda mencari tahu mengenai layanan web hosting terbaik,
kami pastikan Anda berada di tempat yang tepat.
Dengan Domain Asia, dapatkan pengalaman
menggunakan layanan web hosting yang lebih baik.
Dengan SSD berperforma tinggi,
dalam infrastruktur cloud yang telah dioptimalkan untuk kebutuhan personal maupun bisnis.
Teknologi ini memungkinkan Anda memperoleh layanan yang lebih stabil serta proteksi dari korupsi data.
Hosting Domain Asia juga telah mendukung Node.js, Python, Ruby, Go, PHP, Java, serta Binary Linux.
Lebih dari 200 ribu pelanggan telah mempercayakan layanan hosting di Domain Asia.
Kepercayaan yang kami jaga dengan garansi uptime 99,9% serta garansi uang kembali 100%
Buat website Anda lebih mendunia, segera beralih ke web hosting Domain Asia
Deskripsi asli dari YouTube
🗣️🕸️ Selasa malam waktunya #NgobrolinWEB! Malam ini kita akan belajar tentang pustaka animasi untuk aplikasi web seperti GSAP, Framer Motion, dan yang lainnya. Mari kita belajar bersama-sama! Episode kali ini merupakan hasil kolaborasi dengan DomaiNesia. Gunakan kode promo: NGOBROLINVPSDN buat diskon 50% langganan Cloud VPS Turbo dan dapat digunakan berkali-kali! Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
12 Jul 2023
Ngobrolin Fluttercon
Episode ini menghadirkan seorang developer asal Jakarta yang kini bekerja di ING, sebuah bank di Belanda, dan obrolannya...
4 Des 2024
Persiapan DevFest Surabaya
Episode ini membahas persiapan dan agenda DevFest Surabaya 2024, acara tahunan Google Developer Group (GDG) Surabaya yan...
17 Mei 2023
Ngobrolin Google IO
Episode ini merangkum apa yang menarik dari Google I/O tahun itu, khususnya sisi web. Pembukanya sebuah pengamatan iseng...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .