Designcode – animasi SVG menggunakan GreenSock Free Download
9 BAGIAN – 2 JAM VIDEO
Pelajari cara menemukan, membuat, dan memanipulasi SVG untuk web. Kemudian tambahkan Library GreenSock animasi JavaScript yang mengagumkan untuk menghidupkan SVG tersebut. Kami akan mendalami kode SVG dan menjelajahi cara menyiapkan ilustrasi Anda untuk dianimasikan. Kemudian kita akan melihat pustaka animasi GreenSock dan banyak plugin berguna untuk menganimasikan SVG kita dengan lancar di CodePen.
Belajar Membuat Animasi yang Menyenangkan dan Cepat
Hai nama saya Christina Gorton dengan Desain+Kode. Hari ini saya ingin mengajari Anda cara menganimasikan SVG dengan perpustakaan animasi JavaScript GreenSock (GSAP). Kita akan memulai dengan melihat kode SVG dan menguraikannya sedikit agar kita dapat lebih memahami cara memanipulasinya untuk animasi. Kemudian saya akan berbicara tentang cara menemukan inspirasi SVG, cara mengekspor dan mengoptimalkan SVG Anda. Selanjutnya saya akan menunjukkan cara menghidupkan SVG tersebut dengan GSAP. Kami akan menggunakan sejumlah ilustrasi indah dan prototipe UI dari kursus tata letak dan animasi CSS saya di CodePen dan menambahkan animasi ke dalamnya. Jika Anda tidak memiliki akun CodePen, kami akan membahas secara singkat tentang cara menyiapkannya hanya dalam satu menit.