Text animations for social: rise, pop, wipe and typewriter

For social posts, four text animation styles do nearly everything: rise (words drift up and fade in, calm and premium), pop (words scale in with a small bounce, short and loud), wipe (a line is revealed from one side, like a curtain) and typewriter (letters appear one by one, as if being written now). Match the style to the message, keep each entrance under about three quarters of a second, then hold the words still long enough to read twice. Use one style per post. That is most of the craft.

The four text animations at a glance

Rise: the safe, premium default

Rise moves each line a short distance upwards while it fades in, then lets it settle. Because the movement is small and decelerates, the eye reads the words almost as soon as they start to appear. It is the right default for brands that want to feel calm: hotels, studios, skincare, architecture, consultancies.

Stagger lines by about 100 to 150 milliseconds so they cascade. Stagger words only for very short lines; staggering letters with rise looks fussy.

Pop: for short words that need to land

Pop scales a word up from slightly smaller, overshoots a touch and settles. It has energy, so it suits words you want to hit: a price, a percentage, "Sold out", "Tonight", "Last day". It fails on long sentences, which wobble rather than land.

Wipe: reveal a headline like a curtain

Wipe uncovers a line from one edge to the other, so the words appear in reading order without moving. It feels deliberate and cinematic, and because the letters themselves stay put, it is one of the most readable entrances. Use it for headlines, for a "before" line wiped away to reveal an "after", or for a name revealed at the end of a video.

Wipe in the reading direction: left to right for English and most European languages. A wipe against the reading direction feels like the text is being taken away.

Typewriter: words written in the moment

Typewriter reveals letters one at a time. It is slower than the other three, which is its point: it makes a line feel personal, as if someone is writing to you now. Use it for questions, short quotes, tips and behind the scenes notes. Keep the line short, because the whole sentence has to finish typing before people can read it, and then it still needs a hold.

Choosing the right text animation

1. 1

   Start from the message

   Calm news rises. Urgent news pops. A reveal wipes. A personal note types.

2. 2

   Count the words

   One to three words can take any style. Long lines work best with rise or wipe; avoid pop and typewriter.

3. 3

   Pick one style per post

   Mixing entrances on one frame looks like a template showing off. Consistency is what makes motion feel branded.

4. 4

   Set the hold

   After the last word settles, hold the frame long enough to read twice. Stories auto advance, so this matters most in Instagram Stories.

5. 5

   Watch it muted on a phone

   That is how many of your viewers will see it. If any line is hard to catch, slow it down or cut words.

CSS text animations you can copy

On a website, the same four styles take a few lines of CSS each. Keep them short, run them once, and switch them off for people who prefer reduced motion.

/* Transforms skip plain inline text: use these on block or inline-block elements */
.rise { animation: rise 600ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(0.4em); } }

.pop { animation: pop 320ms cubic-bezier(0.3, 1.5, 0.6, 1) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

.wipe { animation: wipe 700ms cubic-bezier(0.6, 0, 0.2, 1) both; }
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.typewriter {
  font-family: ui-monospace, monospace; /* steps() needs equal letter widths */
  white-space: nowrap; overflow: hidden; width: 24ch;
  animation: type 1.2s steps(24) both;
}
@keyframes type { from { width: 0; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .pop, .wipe, .typewriter { animation: none; }
}

The curves matter as much as the durations; easing explains why rise should decelerate and pop should overshoot. For the wider craft of moving type, see kinetic typography.

Animating text in Gradiently

Gradiently's Studio has these four text animations, rise, pop, wipe and typewriter, for any text layer, over a Mark that can move slowly behind the words. The Mark keeps its calmest area under the text as it moves, so lines stay readable through the whole animation. With Pro, you export stories and Reels as a GIF, or as MP4 or WebM where the browser supports recording. Animated Instagram stories and GIF vs MP4 help you choose the format.