How To Stagger Paragraph Transitions

Twine Version: 2.6.2 (Harlowe 3.3.5)

I want to stagger the transition of my paragraphs. How do I make this code do that?

 .transition-in[data-t8n^=dissolve] {
 	-webkit-animation:appear 0ms step-start;
 	animation:appear 0ms step-start

Do you mean transitioning between Passages, or are you programmatically revealing hidden blocks of text (eg. paragraphs) within a Passage?

If the 2nd, then which technique are you using to reveal hidden blocks of text?

Can you describe in more detail exactly what you mean by “stagger”, because the term can mean different things.

I don’t know all there is to know about CSS, but on sites like Carrd, you can set the CSS transition to fade in one block of text, then after a short moment, another block of text, so they are revealed one at a time instead of all at once.

I’m essentially looking to reveal passage text one paragraph at a time. I tried the typewriter codes out there, and I did get them to work, but I favour the fonts Roboto or Georgia in my stories, and it doesn’t work well with fonts that aren’t monospace (ex. Courier). It’s also difficult to use them with the container divs I use to keep my story centered and contained with a scroll bar in the center of the screen.

This sounds very similar to another question that was just asked in this forum. Perhaps the following can help:

This is exactly what I was looking for, thank you.

1 Like