Handledning: Skapa en animerad motivationspost

Lär dig att skapa ett iögonfallande animerat motivationscitat för Instagram Stories med hjälp av Letter Collage animationer.

*Tid: 10 minuter Svårighet: ** Nybörjare

Vad du skapar

En fantastisk animerad motivationscitat med tre fraser, var och en med olika brev collage stilar och staggered avslöja animationer.

Funktioner du lär dig

• Brev Collage stilar - Neon plattor, tidskriftsutskärningar, pappersklippningseffekter
• Staggered animations - Brev som visas en efter en
• Background generators - Animerad solbränna bakgrund
• Keyframe animationer - Färgövergångar och gnistrande effekter

Steg 1: Ställ in Canvas

1. Öppna PinePaper Editor
2. Klicka på canvas size dropdown i sidfoten
3. Välj *Instagram Story (1080×1920)

Steg 2: Lägg till animerad bakgrund

1. Klicka på fliken Scenes i rätt panel
2. Ställ in bakgrundsläge till Generator
3. Välj Sunburst***
4. Konfigurera färgerna:
   • Färg 1: #FF6B6B (korallröd)
   • Färg 2: #4ECDC4 (teal)
   • Färg 3: #FFE66D (gul)
5. Set *Ray Count: 16
6. Aktivera **** och ställ in hastighet: 0,5
7. Klicka Generera*

Steg 3: Skapa “DREAM BIG” Letter Collage

1. Klicka på knappen Letter Collage* i verktygsfält (eller tryck på L)
2. Typ: DREAM BIG*
3. Konfigurera stilen:
   • Stil: Til***
   • Palette: Neon**
   • Font Storlek: 72****************************************************
   • Corner Radius: 8
   • Aktivera skugga
4. Position i mitten av toppområdet (x: 540, y: 750)

Kodekvivalent:

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

Steg 4: Lägg till Staggered Animation till “DREAM BIG”

1. Med det valda collaget öppnar du Timeline-panelen*
2. Klicka Lägg till Staggered Animation*
3. Konfigurera:
   • Effekt: Pop In*
   • Stagger Delay: 0,08***********
   • Varaktighet: 0.5*****************************************************************************************************************************************************************************************************************************************************
   • Sekvens: Linjär (vänster till höger)
   • Lättnad: easeOut**

Kodekvivalent:

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

Steg 5: Skapa “WORK HARD” Letter Collage

1. Skapa ett annat brev collage med:

   • Text: Arbeta hårt*
   • Stil: Magazine (ransom note look)
   • Palette: MagasinMagazin***********************************
   • Font Size: 60******
   • Position: (540, 920)

2. Lägg till staggered animation:

   • Effekt: Fade Slide Up*
   • Stagger Delay: 0.1s********
   • Sekvens: Wave (flowing avslöja)

Kodekvivalent:

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

Steg 6: Skapa “STAY HUMBLE” Letter Collage

1. Skapa det tredje Letter Collage:

   • Text: STAY HUMBLE***
   • Stil: Paper Cut (3D-skuggeffekt)
   • Font Storlek: 68************************
   • Position: (540, 1100)

2. Lägg till staggered animation med bounce:

   • Effekt: Pop In*
   • Stagger Delay: 0.06***************************************************************************************************************************************************************************************************************************************************
   • Sekvens: Center (avslöjar från mitten utåt)
   • Lättnad: Bounce*

Kodekvivalent:

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

Steg 7: Lägg till dekorativ Accent Line

1. Skapa en rektangel för en dekorativ divider:

   • Bredd: 500, höjd: 8
   • Färg: Vit (#FFFFFF)
   • Position under fraserna

2. Lägg till keyframe animation för färg pulsing:

Kodekvivalent:

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

Steg 8: Förhandsgranska och spela

1. Tryck på Space för att spela animation
2. Timeline visar en 6 sekunders loop
3. Titta på staggered avslöjar:
   • “DREAM BIG” dyker bokstavligen
   • “WORK HARD” glider upp med en vågeffekt
   • “STAY HUMBLE” studsar från mitten utåt

Steg 9: Export

För Instagram Story (Video)

1. Klicka på Export* knapp
2. Välj WebM* (rekommenderas) eller MP4**************************************************************************************************************************************************************************************************************************************
3. Konfigurera:
   • Varaktighet: 6 sekunder*
   • Ramsats: 30 fps***************************************
   • Kvalitet: Hög*
4. Klicka Export* och vänta på nedladdning

För andra plattformar

Komplett kod

Här är hela koden för att återskapa denna animation:

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

Snabbstart: Använd mallen

Istället för att bygga från början, ladda den förbyggda mallen:

1. Öppna Templates Panel (höger sidabar)
2. Välj kategori: Social Media**
3. Klicka på Motivational Quote**
4. Mallen laddar med alla animationer redo

Letter Collage Styles Referens

Stagger Sequence Mönster

Pro Tips

Kontrast är viktigt - Ljustext på mörka bakgrunder (eller vice versa) för läsbarhet.

*Stagger timing – 0,05-0,1s mellan bokstäver känns naturligt. För snabbt ser mekaniskt ut.

Mix stilar - Använda olika Letter Collage stilar för varje fras lägger visuellt intresse.

Bounce for emphasis - bounce lättar på “STAY HUMBLE” drar extra uppmärksamhet.

Nästa steg

• Letter Collage Reference - Alla stilar och alternativ
• [Keyframe Editor] (/features/keyframes) - Anpassad tidskontroll
• Effects - Lägg till gnistor och höjdpunkter
• Fysik Animation - Avancerade lättande effekter