Trying to get the typewriter effect to work with Harlowe 2

+1 vote
asked Aug 12 by giangy (370 points)

I am using Twine 2.3.1 and Harlowe 2.0.1 and the code that I found back at the old forums didn't work the way I wished it did. For some reason when the passage has a border, it would run past it the padding and the border itself. Also it seems finicky, because if I put the code at the CSS at the top, it'll ruin my entire layout of my game. It'll just keep going for however long, but gets cut off at some point on the screen. Put it at the bottom seem to work, but it still causes the same problems as said above. 

Here is the code I used that I found, but don't remember or have the link to for reference:

/* This is CSS code */
.css-typing {
width: 30em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 5s steps(75, end);
animation: type 5s steps(75, end);
}
 
@keyframes type {
from { width: 0; }
 
@-webkit-keyframes type {
from { width: 0; }
}

/* This is passage code */
{(live:750ms)[<p class="css-typing">Haikyuu!!</p>(stop:)]}

Is there a more effective typewriter code out there that I don't know of?

2 Answers

+1 vote
answered Aug 12 by greyelf (20,630 points)
It is a little hard to determine what could be causing some of the issues you describe with your layout without having ALL your CSS, and not just the CSS related to the typing effect.

One reason the typing effect could be appearing to stop early is the width of 30em you are assigning it, combine that with your overflow: hidden and the end-result could appear like the typing stops short if the text content was long enough.

eg. If the tw-story or tw-passage elements are 50em wide then the typing effect with stop at 30em which would make it appear to stop early.
commented Aug 13 by giangy (370 points)

OK. This is my code.

@import url('https://fonts.googleapis.com/css?family=Cutive+Mono');

* {
}
 
html {
}
 
body, tw-story {
  	background: #ffffff;
  	font-size: 20pt;
	color: #000000;
  	font-family: 'Cutive Mono', monospace;
  	line-height: 110%;
  	word-spacing: -5px;
  	text-transform: lowercase;
}
 
b, strong {
}
 
i, em {
}

del {
}
 
code {
}
 
q {
}

p {
}
 
h1, h2, h3, h4, h5, h6 {
}
 
hr {
}
 
img {
}
 
blockquote {
}

#id {
}
 
.class {
}

.enchantment-mouseout {
}
 
.enchantment-mouseout:hover {
}
 
tw-passage {
  	border: 1px solid #000000;
  	padding: 25px 30px 25px 30px;
  	margin: 50px;
}
 
tw-link, tw-link.visited {
}
 
tw-link:hover, tw-link.visited:hover {
}
 
tw-sidebar {
}
 
tw-icon, tw-icon.undo, tw-icon.redo {
}
 
tw-include[type="startup"] {
  	display: none;
}
 
mark {	
}

.css-typing {
width: 30em;
white-space: nowrap;
overflow: hidden;
-webkit-animation: type 5s steps(75, end);
animation: type 5s steps(75, end);
}
 
@keyframes type {
from { width: 0; }
 
@-webkit-keyframes type {
from { width: 0; }
}

What do you think? Any problems?

+2 votes
answered Aug 13 by Chapel (17,920 points)

It'll just keep going for however long, but gets cut off at some point on the screen. 

It's supposed to.  The typewriter effect is just achieved by creating a tiny box the text can be seen through, and then increasing the size of that box--the text is always there, it's just hidden.  This is what those animated width properties do.

Crappy example:

// Brackets represent the width of the element.

[]This is sample text. // player sees nothing.

[T]his is sample text. // element widens, revealing the T

[Th]is is sample text. // etc.

The 'white-space: nowrap;' and 'overflow: hidden;' properties are critical to the success of this trick.  The overflow property controls whether the player can see text outside the element's confines (i.e. it's width).  The white-space part prevented the line from wrapping to the next when it's long.

Without overflow

[]This is some text. // even though the element's width is set so the player shouldn't be able to see it, it's visible because it overflows and is visible.  The animation does nothing at all.

Without white-space:nowrap;

[]This is a very very very very very very very very
[]very very very very very very long line. // only the width is effected by the 'typing' trick.

[T]his is a very very very very very very very very
[v]ery very very very very very long line.

[Th]is is a very very very very very very very very
[ve]ry very very very very very long line.

// etc...

In short, the problem you're having is directly caused by the effect you're generating.  You can't really have it both ways.

Is there a more effective typewriter code out there that I don't know of?

You can try typed.js, but I don't know how easy it'll be to get it running in Harlowe.  At a guess, I'd say not very.

commented Aug 15 by giangy (370 points)
Thank you so much for the reply. I think I understand what you mean. Thanks again. I'll look into that.
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.
...