Tutorial: Erstellen Sie einen animierten Motivationsbeitrag

Lernen Sie, ein auffälliges animiertes Motivationszitat für Instagram Stories mit Letter Collage-Animationen zu erstellen.

Zeit: 10 Minuten Schwierigkeit: Anfänger

Was du erschaffen wirst

Ein atemberaubendes animiertes Motivationszitat mit drei Phrasen, die jeweils unterschiedliche Buchstabencollagestile und gestaffelte Enthüllungsanimationen verwenden.

Features, die Sie lernen werden

• Letter Collage Styles - Neonfliesen, Magazinausschnitte, Papierschnitteffekte
• Staffelte Animationen — Buchstaben erscheinen eins nach dem anderen
• Hintergrundgeneratoren — Animierte Sunburst-Hintergründe
• Keyframe-Animationen – Farbübergänge und funkelnde Effekte

Schritt 1: Canvas einrichten

1. Open PinePaper Editor
2. Klicken Sie auf den Dropdown der Canvas-Größe in der Fußzeile
3. Wählen Sie Instagram Story (1080×1920)

Schritt 2: Animierter Hintergrund hinzufügen

1. Klicken Sie auf die Registerkarte Szenen im rechten Bereich
2. Hintergrundmodus auf Generator
3. Auswählen Sunburst
4. Konfiguriere die Farben:
   • Farbe 1: #FF6B6B (Korallenrot)
   • Farbe 2: #4ECDC4 (Tee)
   • Farbe 3: #FFE66D (gelb)
5. Set Ray Count: 16
6. Animate aktivieren und Geschwindigkeit einstellen: 0,5
7. Klicken Generieren

Schritt 3: Erstellen Sie “DREAM BIG” Letter Collage

1. Klicken Sie auf den Letter Collage Button im Symbolleiste (oder drücken Sie L)
2. Typ: DREAM BIG
3. Konfigurieren Sie den Stil:
   • Stil: Tile
   • Palette: Neon
   • Schriftgröße: 72
   • Eckenhalbmesser: 8
   • Schatten aktivieren
4. Position im mittleren Bereich (x: 540, y: 750)

Codeäquivalent:

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

Schritt 4: Füge gestaffelte Animation zu “DREAM BIG” hinzu

1. Mit der ausgewählten Collage öffnen Sie das Timeline Panel
2. Klicken Staffelte Animation hinzufügen
3. Konfigurieren:
   • Effekt: Pop In
   • Verzögerung: 0.08s
   • Dauer: 0,5s
   • Sequenz: Linear (von links nach rechts)
   • Lockerung: easeOut

Codeäquivalent:

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

Schritt 5: Erstellen Sie “WORK HARD” Letter Collage

1. Erstellen Sie eine weitere Letter Collage mit:

   • Text: WERK HARD
   • Stil: Magazine (Lösegeldschein-Look)
   • Palette: Magazin
   • Schriftgröße: 60
   • Position: (540, 920)

2. Füge gestaffelte Animation hinzu:

   • Effekt: Fade Slide Up
   • Verzögerung: 0.1s
   • Sequenz: Wave (fließende Enthüllung)

Codeäquivalent:

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

Schritt 6: Erstellen Sie “STAY HUMBLE” Letter Collage

1. Erstellen Sie die dritte Letter Collage:

   • Text: BEHÖRDE
   • Stil: Papierschnitt (3D-Schatteneffekt)
   • Schriftgröße: 68
   • Position: (540, 1100)

2. Fügen Sie gestaffelte Animation mit Bounce hinzu:

   • Effekt: Pop In
   • Verzögerung: 0.06s
   • Sequenz: Center (enthüllt von der Mitte nach außen)
   • Lockerung: Bounce

Codeäquivalent:

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

Schritt 7: Hinzufügen dekorativer Akzentlinie

1. Erstellen Sie ein Rechteck für einen dekorativen Trenner:

   • Breite: 500, Höhe: 8
   • Farbe: Weiß (#FFFFFF)
   • Position unter den Phrasen

2. Fügen Sie Keyframe-Animation für Farbpulsation hinzu:

Codeäquivalent:

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

Schritt 8: Vorschau und Abspielen

1. Drücken Sie Space, um die Animation abzuspielen
2. Die Timeline zeigt eine 6-Sekunden-Schleife
3. Sehen Sie sich die gestaffelten Enthüllungen an:
   • “DREAM BIG” erscheint in Brief für Brief
   • “WORK HARD” rutscht mit einem Welleneffekt nach oben
   • “STAY HUMBLE” springt von der Mitte nach außen

Schritt 9: Export

Für Instagram Story (Video)

1. Klicken Sie auf Export Button
2. Wählen Sie WebM (empfohlen) oder MP4
3. Konfigurieren:
   • Dauer: 6 Sekunden
   • Frame Rate: 30 fps
   • Qualität: High
4. Klicken Sie auf Export und warten Sie auf den Download

Für andere Plattformen

Vollständiger Code

Hier ist der vollständige Code, um diese Animation neu zu erstellen:

// 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);

Quick Start: Verwenden Sie das Template

Anstatt von Grund auf neu zu erstellen, laden Sie die vorgefertigte Vorlage:

1. Open Templates Panel (rechte Seitenleiste)
2. Kategorie auswählen: Social Media
3. Klicken Sie Motivationszitat
4. Die Vorlage wird mit allen Animationen geladen

Letter Collage Styles Referenz

Stagger-Sequenzmuster

Pro Tipps

Kontrast ist wichtig - Lichttext auf dunklen Hintergründen (oder umgekehrt) ist für die Lesbarkeit unerlässlich.

Stagger Timing - 0.05-0.1s zwischen Buchstaben fühlt sich natürlich an. Zu schnell sieht mechanisch aus.

Mix-Stile - Die Verwendung verschiedener Letter Collage-Stile für jede Phrase fügt visuelles Interesse hinzu.

Bounce für die Betonung — Die bounce Lockerung auf “STAY HUMBLE” zieht zusätzliche Aufmerksamkeit.

Nächste Schritte

• Letter Collage Reference — Alle Stile und Optionen
• Keyframe Editor — Benutzerdefinierte Zeitsteuerung
• Effekte - Hinzufügen von Funkeln und Highlights
• Physikanimation — Erweiterte Lockerungseffekte