Tutorial: Buat Pos Motivasi Teranimasi

Belajar untuk membuat sebuah mata - menangkap kutipan motivasi animasi untuk Cerita Instagram menggunakan animasi Letter Collage.

• • Waktu: * * 10 menit
• • Kesulitan: * * Pemula

What You 'll Create

Sebuah kutipan motivasi animasi yang menakjubkan dengan tiga frase, masing-masing menggunakan gaya kolase huruf yang berbeda dan terhuyung-huyung mengungkapkan animasi.

Kutipan motivasi animasi 0 dengan efek kolase surat

Fitur Anda akan Belajar

• • • Gaya Surat Koleksi * * - Ubin Neon, potongan majalah, efek potongan kertas
• • • Animasi Staggered * * - Huruf muncul satu per satu
• • • Generator latar belakang * * - animasi latar belakang sunburst
• • • animations keyframe * * - Warna transisi dan efek berkilau

Langkah 1: Atur Kanvas

1. Buka Penyunting PinePaper
2. Klik * * ukuran kanvas dropdown * * di kaki
3. Pilih * * Instagram Story (1080 × 1920) * *

Pilih Instagram Ukuran Kisah 1

Langkah 2: Tambahkan Latar Belakang Teranimasi

1. Klik * * Skenario * * tab di panel kanan
2. Atur Mode Latar Belakang ke * * Generator * *
3. Pilih * * Sunburst * *
4. Mengkonfigurasi warna:
   • Warna 1:
   • Warna 2:
   • Warna 3:
5. Set * * Ray Cacah * *: 16
6. Aktifkan * * Animate * * dan atur Kecepatan: 0.5
7. Klik * * Hasilkan * *

Latar belakang sunburst animated 0 dengan warna cerah

Langkah 3: Buat “DREAM BIG” Surat Koleksi

1. Klik tombol * * Kolage Huruf * * di bilah alat (atau tekan td 0)
2. Tipe: * * DREAM BIG * *
3. Atur gaya:
   • Gaya: * * Ubin * *
   • Palet: * * Neon * *
   • Ukuran Fonta: * * 72 * *
   • Radius Sudut: 8
   • Aktifkan Bayangan
4. Posisi pada area tengah-atas (x: 540, y: 750)

Setara kode:

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

Langkah 4: Tambahkan Animasi Tergagap ke “DREAM BIG”

1. Dengan collage dipilih, membuka * * Panel Timeline * *
2. Klik * * Tambah Animasi Tertunda * *
3. Konfigurasi:
   • Efek: * * Pop In * *
   • Stagger Delay: * * 0.08s * *
   • Durasi: * * 0.5s * *
   • Sekuence: * * Linear * * (kiri ke kanan)
   • Easing: * * easeOut * *

Setara kode:

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

Surat-surat mati dengan bunga terhuyung-huyung

Langkah 5: Buat “KERJA KERAS” Surat Koleksi

1. Buat Koleksi Huruf lain dengan:

   • Teks: * * KERJA KERJA * *
   • Gaya: * * Majalah * * (catatan tebusan terlihat)
   • Palet: * * Magazine * *
   • Ukuran Fonta: * * 60 * *
   • Posisi: (540, 920)

2. Tambah animasi terhuyung:

   • Efek: * * Fade Slide Up * *
   • Stagger Delay: * * 0.1s * *
   • Sequence: * * Wave * * (mengalir mengungkapkan)

Setara kode:

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

Langkah 6: Buat “STAY HUMLAH” Surat Koleksi

1. Buat Koleksi Huruf Ketiga:

   • Teks: * * STAY JAM * *
   • Gaya: * * Potong Kertas * * (Efek bayangan 3D)
   • Ukuran Fonta: * * 68 * *
   • Posisi: (540, 1100)

2. Tambahkan animasi terhuyung dengan bounce:

   • Efek: * * Pop In * *
   • Stagger Delay: * * 0.06s * *
   • Sequence: * Center * * (expose from middle outside)
   • Easing: * * Bounce * *

Setara kode:

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

Tiga kalimat dengan gaya yang berbeda

Langkah 7: Tambah Baris Aksen Dekoratif

1. Buat persegi panjang bagi pembagi dekoratif:

   • Lebar: 500, Tinggi: 8
   • Warna: Putih (tidak)
   • Posisi di bawah frasa

2. Tambah animasi bingkai kunci untuk warna berdenyut:

Setara kode:

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

Langkah 8: Pratilik dan Putar

1. Tekan # 0 untuk memainkan animasi
2. Timeline menampilkan sebuah loop 6 detik
3. Perhatikan terhuyung mengungkapkan:
   • “DREAM BIG” muncul melalui surat lewat surat
   • “KERJA KERAS” slide dengan efek gelombang
   • “TINGGAL JAM” memantul dari tengah luar

Langkah 9: Ekspor

Untuk Kisah Instagram (Video)

1. Klik * * Ekspor * * tombol
2. Pilih * * WebM * * (disarankan) atau * * MP4 * *
3. Konfigurasi:
   • Durasi: * * 6 detik * *
   • Frame Rate: * * 30 fps * *
   • Kualitas: * * Tinggi * *
4. Klik * * Ekspor * * dan tunggu untuk diunduh

Untuk Platform Lain

Kode Lengkap

Ini kode lengkap untuk menciptakan animasi ini:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

Cepat Mulai: Gunakan Template

Alih-alih membangun dari awal, memuat templat pra- bawaan:

1. Buka * * Templat Panel * * (batang sisi kanan)
2. Pilih kategori: * * Media Sosial * *
3. Klik * * Kutipan Motivasi * *
4. Templat penuh dengan semua animasi siap

Referensi Styles Koleksi Huruf

Pola Sequence Stagger

Pro Tips

• • Kontras hal * * - teks cahaya pada latar belakang gelap (atau sebaliknya) adalah penting untuk readability.

• • Stagger timing * * - 0.05- 0.1s diantara huruf terasa alami. Terlalu cepat terlihat mekanik.

• • • Gaya Mix * * - Menggunakan gaya Huruf yang berbeda untuk setiap frase menambahkan kepentingan visual.

• • Bounce for penekanan * * - * The # 0 sedang mencari “STAY HUMLE” menarik perhatian ekstra.

Langkah Berikutnya

• • Semua gaya dan pilihan
• [Keyframe Editor] (t 0] - Kontrol waktu gubahan
• • Tambahkan berkilau dan highlights
• Font color = “# DF01D7” (Fisika Animation)