Tutorial: Maak een Animated Motivational Post

Leer om een opvallende geanimeerde motivatie citaat te maken voor Instagram Stories met behulp van Letter Collage animaties.

Tijd: 10 minuten Moeilijkheidsgraad: Beginners

Wat je gaat maken

Een prachtig geanimeerde motivatie citaat met drie zinnen, elk met behulp van verschillende letter collage stijlen en gespreid onthullen animaties.

Functies die je leert

• Letter Collage stijlen
• Staggered animations
• Achtergrond generatoren Geanimeerde zonnestraal achtergronden
• Keyframe animaties

Stap 1: Canvas instellen

1. PinePaper-editor openen
2. Klik op de canvas size dropdown in de voettekst
3. Selecteer Instagram Story (1080×1920)

Stap 2: Geanimeerde achtergrond toevoegen

1. Klik op het tabblad Scenes in het rechter paneel
2. Achtergrondmodus instellen op Generator
3. Kies Sunburst
4. De kleuren instellen:
   • Kleur 1: #FF6B6B (coral red)
   • Kleur 2: #4ECDC4 (teal)
   • Kleur 3: #FFE66D (geel)
5. Set Ray Count: 16
6. Animate inschakelen en snelheid instellen: 0,5
7. Klik op Generate

Stap 3: Maak “DREAM BIG” briefcollage

1. Klik op de Letter Collage knop in de werkbalk (of druk op L)
2. Type: DREAM BIG
3. De stijl instellen:
   • Stijl: Tile
   • Palet: Neon
   • Lettertypegrootte: 72
   • Hoek Straal: 8
   • Schaduw inschakelen
4. Positie op het midden-bovengebied (x: 540, y: 750)

Code-equivalent:

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

Stap 4: Voeg Staggered Animatie toe aan “DREAM BIG”

1. Met de collage geselecteerd, open het Timeline Panel
2. Klik Toevoegen Staggered Animatie
3. Instellen:
   • Effect: Pop In
   • Vertraging van de hertog: 0,08s
   • Duur: 0,5s
   • Volgorde: Linear (van links naar rechts)
   • Easing: easeout

Code-equivalent:

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

Stap 5: Maak “WORK HARD” brievencollage aan

1. Maak een andere lettercollage aan met:

   • Tekst: WORK HARD
   • Stijl: Magazine (ransom note look)
   • Palet: Magazine
   • Lettertypegrootte: 60
   • Positie: (540, 920)

2. Gespreide animatie toevoegen:

   • Effect: Vervaagde schuif omhoog
   • Vertraging: 0,1s
   • Sequence: Wave (flowing display)

Code-equivalent:

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

Stap 6: Maak “STAY HUMBLE” brievencollage aan

1. Maak de derde lettercollage:

   • Tekst: STAY HUMBLE
   • Stijl: Paper Cut (3D schaduw effect)
   • Lettergrootte: 68
   • Positie: (540, 1100)

2. Gespreide animatie toevoegen met bounce:

   • Effect: Pop In
   • Vertraging van de hertog: 0.06s
   • Sequentie: Center (openbaring van het midden naar buiten)
   • Easing: Bounce

Code-equivalent:

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

Stap 7: Decoratieve Accent-lijn toevoegen

1. Maak een rechthoek aan voor een decoratieve scheiding:

   • Breedte: 500, Hoogte: 8
   • Kleur: wit (#FFFFFF)
   • Positie onder de zinnen

2. Toevoegen sleutelframe animatie voor kleur pulsering:

Code-equivalent:

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

Stap 8: Voorbeeld en Afspelen

1. Druk op Space om de animatie af te spelen
2. De tijdlijn toont een 6 seconden lus
3. Bekijk de gespreide onthult:
   • “DREAM BIG” verschijnt in brief per brief
   • “WORK HARD” glijdt omhoog met een golfeffect
   • “STAY HUMBLE” stuitert vanuit het midden naar buiten

Stap 9: Exporteren

Voor Instagram Story (Video)

1. Klik op Export knop
2. Selecteer WebM (aanbevolen) of MP4
3. Instellen:
   • Duur: 6 seconden
   • Frame rate: 30 fps
   • Kwaliteit: High
4. Klik op Export en wacht op download

Voor andere platformen

Volledige code

Hier is de volledige code om deze animatie te herscheppen:

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

Snelstart: Gebruik het sjabloon

In plaats van te bouwen vanaf nul, laad het voorgebouwde sjabloon:

1. Open Sjablonenpaneel (rechter zijbalk)
2. Selecteer categorie: Sociale media
3. Klik op Motivational Quote
4. De sjabloon laadt met alle animaties klaar

Referentie lettercollagestijlen

Stagger-sequentiepatronen

Pro Tips

Contrast-zaken Lichte tekst op donkere achtergronden (of vice versa) is essentieel voor leesbaarheid.

Stagger timing Te snel ziet er mechanisch uit.

Mix stijlen .

Bounce voor de nadruk .

Volgende stappen

• Letter Collage Reference
• Keyframe Editor
• Effecten
• Fysics Animatie