Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Typewriter Transition

I see that there is a (transition:) macro, but I haven't gotten it to work yet.  Is there any way to recreate Leon's typewriter transition with it (or via another method) so the words type out on the screen?

Comments

  • Hello,

    This works well for me in Twine 2 - Harlowe.

    In "Edit Story Stylesheet" add the follow:

    .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; }
    }


    And in your passage:

    {(live:250ms)[<p class="css-typing">Hello Typewriter!</p>(stop:)]}

    online example
  • It works a little bit.  It's cutting off the letters because it's putting it on the screen in tiny squares vs. at the beginning/end of letter.  If that makes sense.  It's more apparent if you slow it down.

    Leon's old macro had each letter pop onto the screen individually.  I thought that was what the new Harlowe (t8n:) macro was for?
  • The documentation states that the (transition:) macro is used to apply built-in effects to a hook, the current possible effects can be found in this CSS related file.

    You may be able to create your own transition types by using the information found in the base CSS (related to the data-t8n attribute) that comes with a Harlowe story. (this CSS is generated by the above file.)
  • [quote]It works a little bit.  It's cutting off the letters because it's putting it on the screen in tiny squares vs. at the beginning/end of letter.  If that makes sense.  It's more apparent if you slow it down.

    Leon's old macro had each letter pop onto the screen individually.  I thought that was what the new Harlowe (t8n:) macro was for?

    In CSS transitions you need to set a "monospaced" font to make like every character is showing individualy. Look at Lea Verou css typewriter transitions to see the differences http://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/

    Also you can make a JS function or import one like Type.js to achive this effect. And then, in the Passage add:

    <iframe onload="$('.typewriter').typewriter({'speed':100});"  width="0" height="0" style="visibility: hidden;"></iframe>
    <p class='typewriter'>Hello World!</p>


  • Oh!  That is interesting.  I didn't try this with a monospace font.  Going over to try it now.
Sign In or Register to comment.