Tutorial: Opprett en animert motivasjon

Lær å skape et iøynefallende animert motivasjons sitat for Instagram Stories ved å bruke Letter Collage animasjoner.

Tid: 10 minutter Difficulty: Nybegynner

Hva du vil lage

Et fantastisk animert motivasjons sitat med tre fraser, hver ved hjelp av forskjellige bokstav collage stiler og stagnert avsløre animasjoner.

Funksjoner du vil lære

• Letter Collage stiler — Neon fliser, magasin cutouts, papir kutt effekter
• Staggered animasjoner — Brev som vises én etter én
• Bakgrunnsgeneratorer — Animerte solburstbakgrunner
• Keyframe animasjoner — Fargeoverganger og gnistreeffekter

Trinn 1: Sett opp lerret

1. Åpne PinePaper Editor
2. Klikk på Canvas størrelse nedtrekk i bunnen
3. Velg Instagramhistorie (1080×1920)

Trinn 2: Legg til animert bakgrunn

1. Klikk på Scenes-fanen i høyre panel
2. Velg bakgrunnsmodus til Generator
3. Velg Sunburst
4. Sett opp fargene:
   • Farge 1: #FF6B6B (koral rød)
   • Farge 2: #4ECDC4 (forsegling)
   • Farge 3: #FFE66D (gul)
5. Sett Ray Count: 16
6. Aktiver Animat og sett hastighet: 0.5
7. Klikk Opprett

Trinn 3: Opprett “DREAM BIG” Letter Collage

1. Klikk på Letter Collage knappen i verktøylinje (eller trykk L)
2. Type: DREAM BIG
3. Konfigurer stilen:
   • Stil: Flat
   • Neon
   • Skriftstørrelse: 72
   • Hjørneradius: 8
   • Slå på skygge
4. Posisjon i sentrum-topp-området (x: 540, y: 750)

Kodeekvivalent:

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

Trinn 4: Legg Staggered Animation til “DREAM BIG”

1. Med collage valgt, åpne Timeline Panel
2. Klikk Legg til Staggered Animation
3. Konfigurer:
   • Effekt: Pop i
   • Stagger Forsinkelse: 0.08s
   • Varighet: 0.5s
   • Sekvens: Linear (venstre til høyre)
   • Easing: easeout

Kodeekvivalent:

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

Trinn 5: Opprett “WORK HARD” Brevkollage

1. Opprett et nytt brev sammen med:

   • Tekst: WORK HARD
   • Stil: Magazin (ransom note look)
   • Palett: Magazin
   • Skriftstørrelse: 60
   • Posisjon: (540, 920)

2. Legg til staggered animasjon:

   • Effekt: Fade Slide Up
   • Stagger Forsinkelse: 0.1s
   • Sekvens: Wave (strømningsavsløring)

Kodeekvivalent:

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

Trinn 6: Opprett " STAY HUMBLE" Letter Collage

1. Opprett den tredje bokstaven collage:

   • Tekst: STAY HUMBLE
   • Stil: Paper Cut (3D skyggeeffekt)
   • Skriftstørrelse: 68
   • Posisjon: (540, 1100)

2. Legg til staggered animasjon med studs:

   • Effekt: Pop i
   • Stagger Forsinkelse: 0.06s
   • Sekvens: Center (revaler fra midten ut)
   • Easing: Bounce

Kodeekvivalent:

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

Trinn 7: Legg til dekorativ Accent Line

1. Opprett et rektangel for en dekorativ splitter:

   • Bredde: 500, Høyde: 8
   • Farge: Hvit (#FFFFFF)
   • Posisjon under setningene

2. Legg til nøkkelrammeanimasjon for fargepulsing:

Kodeekvivalent:

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

Trinn 8: Forhåndsvisning og spill

1. Trykk Space for å spille animasjonen
2. Tidslinjen viser en 6-sekunders loop
3. Se på den svimlende avslører:
   • “DREAM BIG” pops i brev per bokstav
   • “WORK HARD” lyser opp med en bølgeeffekt
   • “STAY HUMBLE” hopper fra sentrum utover

Trinn 9: Eksport

For Instagram Story (Video)

1. Klikk Eksporter-knappen
2. Velg WebM (anbefalt) eller MP4
3. Konfigurer:
   • Varighet: 6 sekunder
   • Rammepris: 30 fps
   • Kvalitet: Høy
4. Klikk Eksporter og vent på nedlasting

For andre plattformer

Komplett kode

Her er den fulle koden for å gjenskape denne animasjonen:

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

Rask start: Bruk malen

I stedet for å bygge fra grunnen, last den forhåndsbygde malen:

1. Åpne Temales Panel (høyre sidepanel)
2. Velg kategori: Sosiale medier
3. Klikk Motivasjons sitat
4. Malen laster med alle animasjoner klar

Brevkollage stiler referanse

Stagger Sekvensmønster

Pro Tips

Kontrast betyr — Lys tekst på mørke bakgrunner (eller omvendt) er viktig for leselighet.

Stagger timing — 0,05-0.1s mellom bokstavene føles naturlig. For raskt ser mekanisk ut.

Mix-stiler - Bruk av forskjellige bokstavkollage-stiler for hver frase legger til visuel interesse.

Bounce for vekt - bounce easing on -Stay HUMBLE - trekker ekstra oppmerksomhet.

Neste trinn

• Letter Collage Reference - Alle stiler og alternativer
• Keyframe Editor - Tilpasset tidskontroll
• Effekter — Legg til gnister og høydepunkter
• [Physics Animation] (/tutorials/physics-animation) — Avanserte easing effekter