Tutorial: Ciptakan Pos Motivasi Animasi

Belajarlah untuk membuat kutipan motivasi animasi yang menarik mata untuk cerita Instagram menggunakan animasi Letter Collage.

Waktu: 10 menit Difficulty: Pemula

Apa yang Akan Anda Ciptakan

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

Kutip motivasi dengan efek kolase huruf

Fitur yang Akan Anda Pelajari

• **Letter Collage style — Ubin neon, pemotongan majalah, pemotongan kertas
• *Animasi berlanggam — Huruf muncul satu per satu
• Generator latar belakang — Latar belakang ledakan matahari Animasi
• Keyframe animasi — Peralihan warna dan efek berkilauan

Langkah 1: Pasang Kanvas

1. Penyunting Open PinePaper
2. Klik canvas size dropdown di kaki

3. ---

Yozaid

Langkah 2: Tambahkan Latar Belakang Animasi

1. Klik Scenes pada panel kanan
2. Undo-type
3. Pilih Sunburst
4. Atur warna:
   • Warna 1: #FF6B6B (merah koral)
   • Warna 2: #4ECDC4 (teal)
   • Warna 3: #FFE66D (kuning)
5. **** ***: 16
6. Aktifkan Animate dan set Kecepatan: 0.5
7. Klik*Generate

Langkah 3: Cipta “DREAM BIG” Pengumpulan Huruf

1. Klik Letter Collage pada bilah alat (atau tekan L)
2. Jenis: DREAM BIG
3. Atur gaya:
   • Gaya: Tile
   • Palet: Neon
   • Ukuran Font XAZ: 72
   • Radius Sudut: 8
   • Bebayangkan Bebayang
4. Posisi ari di daerah puncak-pusat (x: 540, y: 750)

Kesetaraan Kodeks:

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 Tertantang ke “DREAM BIG”

1. Dengan kolase terpilih, buka Garis Waktu
2. Klik*Tambah Animasi Tertagger
3. Konfigur:
   • Kesan: Pop In
   • Tundaan Stagger: 0.08s*
   • 0.5s*
   • Urutan: Linear (kiri ke kanan)
   • EaseOut

Kesetaraan Kodeks:

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

Dana:

Langkah 5: Cipta “WORK HARD” Kumpul Surat

1. Penampungan huruf lain dengan:

   • Teks: WORK HARD
   • Gaya: Magazine (penampilan note RSOS)
   • Palet: Magazine
   • 60
   • Posisi: (540. 920)

2. Tambahkan animasi terhuyung:

   • Efek: *Fade Slade Up
   • Tundaan Stagger: 0.1s
   • Urutan: Wave (pengungkapan aliran)

Kesetaraan Kodeks:

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: Ciptakan “STAY HUMBLE” Kumpul Surat

1. Apa yang kau lakukan

   • Teks: STAY HUMBLE
   • Gaya: Paper Cut (efek bayangan 3D)
   • 68
   • Kedudukan: (540, 1100)

2. Tambahkan animasi terhuyung dengan pantulan:

   • Kesan: Pop In
   • Tundaan Stagger: 0.06s*
   • Urutan: Center (reveal dari luar tengah)
   • Bounce

Kesetaraan Kodeks:

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'
});

Ozaiz

Langkah ke - 7

1. Ukiran berbentuk persegi panjang untuk pembagi dekoratif:

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

2. Tambahkan animasi bingkai kunci untuk pulsing warna:

Kesetaraan Kodeks:

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' }
]);

Step 8: Pratonton dan Main

1. Memainkan animasi
2. Garis waktu menunjukkan lingkaran 6 detik
3. Tonton pengungkapan mengejutkan:
   • “DREAM BIG” muncul dalam huruf demi huruf
   • “WORK HARD” meluncur dengan efek gelombang
   • “STAY HUMBLE” memantul dari tengah ke luar

Esport

(Video)

1. Klik**Export button
2. Pilih WebM (disarankan) atau MP4
3. Konfigur:
   • 6 detik
   • Frame Rate: 30 fps
   • Kualitas Mutu: Tinggi
4. Klik**Export dan tunggu untuk dimuat turun

Platform - Platform Lain

Kode Lengkap kode code

Ini kode penuh 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);

Cari Cepat Awal: Gunakan Templat

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

1. BukaTemplat Panel** (batang sisi kanan)
2. Sosial Media
3. Klik
4. Templat loads dengan semua animasi siap

Referensi Letter Collage Styles

Pola Jujukan Stagger

Tips Pro

**Perkara kontras — Teks terang pada latar belakang gelap (atau sebaliknya) sangat penting untuk dibaca.

*Stagger timing — 0.05-0.1s antar huruf terasa wajar. Terlalu cepat terlihat mekanik.

**Mix gaya — Menggunakan gaya Collage Huruf yang berbeda untuk setiap frasa menambahkan minat visual.

*Bounce untuk penekanan — The bounce easing on “STAY HUMBLE” menarik perhatian ekstra.

Langkah - Langkah Berikutnya

• • Semua gaya dan pilihan
• Kunciframe Editor — pengendalian waktu suai
• (/features/effects) — Tambahkan kilauan dan sorotan)
• (/tutorials/physics-animation) — Efek easing lanjutan