How To Stagger Paragraph Transitions

[ott94]

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
 }

[Greyelf]

@ott94

the transition of my paragraphs

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?

@ott94

stagger the transition

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

[ott94]

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.

[HAL9000]

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

"dissolve" macro affecting background image?

After you display the passage with the background, you can reveal blocks of text in that same passage with their own individual transitions. I think this is what you are trying to achieve. Check out the Harlowe Manual’s chapter on Transition Delays. Let the passage appear, wait a couple of seconds before revealing the first block of text, and so on and so forth. Let us know if you have any other questions.

[ott94]

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