Tutorial: Creare un Post Motivazionale Animato

Imparare a creare un accattivante citazione motivazionale animata per Instagram Storie utilizzando animazioni Letter Collage.

10 minuti Difficoltà: Principiante

Cosa creerai

Un’incredibile citazione motivazionale animata con tre frasi, ognuna con diversi stili di collage di lettere e animazioni rivelate sfalsate.

Citazione motivazionale di

Caratteristiche che imparerai

• Letter Collage style — Tegole neon, ritagli di riviste, effetti di taglio di carta
• Animazioni registrate — Lettere che appaiono una per una
• Generatori di fondo — Sfondi di abbronzatura animati
• Animazioni per fotogrammi — Trasferimenti di colore e effetti scintillanti

Passo 1: Impostare la tela

1. Open PinePaper Editor
2. Fare clic sulla dimensione canvas dropdown nel footer
3. Selezionare Instagram Story (1080×1920)

Passo 2: Aggiungi sfondo animato

1. Fare clic sulla scheda Scenes nel pannello destro
2. Impostare la modalità di sfondo a Generator
3. Selezionare Sunburst
4. Configurare i colori:
   • Colore 1: #FF6B6B (rosso corallo)
   • Colore 2: #4ECDC4 (teal)
   • Colore 3: #FFE66D (giallo)
5. Set Ray Count: 16
6. Abilitare Animate e impostare Velocità: 0.5
7. Clicca su Generate

Passo 3: Creare “DREAM BIG” Lettera Collage

1. Fare clic sul pulsante Letter Collage nel pulsante barra degli strumenti (o premere L)
2. Tipo:
3. Configurare lo stile:
   • Stile: Tile
   • • No
   • Dimensione del carattere: 72
   • Radius angolo: 8
   • Attiva ombra
4. Posizione nella zona centrale (x: 540, y: 750)

Codice equivalente:

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

Passo 4: Aggiungi Animazione Staggered a “DREAM BIG”

1. Con il collage selezionato, aprire il Timeline Panel
2. Fare clic su Aggiungi Animazione pugnalata
3. Configurazione:
   • Effetto:
   • Ritardo dei pugnali:
   • Durata: 0.5s
   • Sequenza: Linear (da sinistra a destra)
   • Easing:

Codice equivalente:

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

Passo 5: Creare “WORK HARD” Lettera Collage

1. Crea un altro Collage con:

   • Testo:
   • Stile: Magazine (occhiata alla nota di riscatto)
   • Magazine
   • Dimensione del carattere: 60
   • Posizione: (540, 920)

2. Aggiungi l’animazione pugnalata:

   • Effetto: Fade Slide Up
   • Ritardo dei pugnali:
   • Sequenza:

Codice equivalente:

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

Passo 6: Creare “STAY HUMBLE” Lettera Collage

1. Creare la terza Lettera Collage:

   • Testo:
   • Stile: Paper Cut (3D effetto ombra)
   • Dimensione del carattere: 68
   • Posizione: (540, 1100)

2. Aggiungi l’animazione sfalsata con rimbalzo:

   • Effetto:
   • Disabilitatore:
   • Revisione:
   • Easing:

Codice equivalente:

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

Passo 7: Aggiungi linea decorativa accento

1. Creare un rettangolo per un divisore decorativo:

   • Larghezza: 500, Altezza: 8
   • Colore: Bianco (#FFFFFF)
   • Posizione sotto le frasi

2. Aggiungi l’animazione keyframe per la polverizzazione del colore:

Codice equivalente:

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

Passo 8: Anteprima e riproduzione

1. Premere Space per riprodurre l’animazione
2. La Timeline mostra un loop di 6 secondi
3. Guarda le rivelazioni sconcertate:
   • “DREAM BIG” compare in lettera per lettera
   • “WORK HARD” scorre con un effetto onda
   • “STAY HUMBLE” rimbalza dal centro verso l’esterno

Passo 9: Esportazione

Per Instagram Story (Video)

1. Clicca sul pulsante Esporta
2. Selezionare WebM (consigliato) o MP4
3. Configurazione:
   • Durata: 6 secondi
   • Tasso di telaio: 30 fps
   • Qualità: High
4. Fare clic su Esporta e attendere il download

Per altre piattaforme

Codice completo

Ecco il codice completo per ricreare questa animazione:

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

Avvio rapido: Utilizzare il modello

Invece di costruire da zero, caricare il modello pre-costruito:

1. Aprire Templates Panel (lato destro)
2. Seleziona la categoria: Social Media
3. Clicca su Citazione motivazionale
4. Il modello si carica con tutte le animazioni pronte

Letter Collage Styles Riferimento

Schemi di sequenza dei pugnali

Pro Suggerimenti

Contrasto materie — Il testo leggero su sfondi scuri (o viceversa) è essenziale per la leggibilità.

Stagger time — 0.05-0.1s tra lettere si sente naturale. Troppo veloce sembra meccanico.

Mix style — Utilizzando diversi stili Letter Collage per ogni frase aggiunge interesse visivo.

Bounce per l’enfasi — L’bounce easing su “STAY HUMBLE” attira l’attenzione in più.

Prossimo passo

• Letter Collage Reference — Tutti gli stili e le opzioni
• Keyframe Editor — Controllo della tempistica personalizzato
• Effects — Aggiungi scintille e punti salienti
• Physics Animation — Effetti di easing avanzati