Typerwriter Transition - help needed

Randalthor

Hello!

I've been trying to do some research on figuring out the typerwriter transition for my twinery story, in order to ad the special effect needed to carry out the plot. I've looked into numerous websites and forum posts, such as (https://www.glorioustrainwrecks.com/node/5161), (http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/), and (https://drafts.csswg.org/css-animations-1/#animation-timing-function)... however, the only thing that worked with twine 2 on sugarcube 2, has seemed to be only glorioustrainwrecks but I keep receiving a fatal error message. I was wondering if anyone knew the answer to the problem? Thanks!!


Here's some pictures.

The format used: https://puu.sh/vZEl4/7c51391627.png
The error: https://puu.sh/vZEl4/7c51391627.png

greyelf

It is unclear from your question if you are using SugarCube 2 or was only mentioning it in relation to the links you supplied. Please state the name and full version number of the Story Format you are using, as answers can be different for each one.

If you are using one of the Sugar 2 releases then I suggest you look at the last entry in its Add-ons section, an integration module which can be used to add support for the typed.js library is listed there.

The code found on the glorioustrainwrecks website was written for the story formats that came with Twine 1, and is generally not compatible with any Twine 2 based Story Format,

Randalthor

Oh whoops, sorry about that. I'm using sugarcube 2.18.0 and I hadn't realized the code wasn't compatible with Twine 2. I've found something different after looking around some more as I was waiting for the post to be approved, and I came across this!

body{
background: #000;
padding-top: 10px;
}

p{
color: lime;
font-family: "Courier";
font-size: 20px;
margin: 10px 0 0 10px;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: type 4s steps(60, end);
}

p:nth-child(2){
animation: type2 8s steps(60, end);
}

p a{
color: lime;
text-decoration: none;
}

span{
animation: blink 1s infinite;
}

@keyframes type{
from { width: 0; }
}

@keyframes type2{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}

@keyframes blink{
to{opacity: .0;}
}

::selection{
background: black;
}

while

<p>hello, this is the typewriting transition</p>

is placed into the passage.


It works! But my issue is that the words get cut off, and doesn't stay within the border. Is there a way to fix this?

https://puu.sh/w0OMe/0a6665c7c9.png
https://puu.sh/w0OLp/bbdaf69c34.png

greyelf

Randalthor wrote: »

I've found something different...

I suggest you try the method I mentioned earlier that is referenced to on the SugarCube 2 web-site.

Randalthor

ALRIGHT! Your last comment helped me figure out you were addressing the website itself, and I followed the directions, played around with it and it works! Thank you so much, Greyelf! Would've helped if you elaborated more but I got it eventually :P Thanks man!

greyelf

Randalthor wrote: »

if you elaborated more...

I wrongly assumed you actually looked at the (excellent) documentation of the story format you are using, which is generally the first place to check if a certain feature exists and a good thing to become familiar with. The Add-ons section is on the first/main page of the SugarCube 2 site.

Google does not know everything, nor does it always put the best(tter) answers higher in its search results list. It is more based on popular then on actuate or correctness.