Howdy, Stranger!

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

show delayed multiple lines of text in same passage

Good morning folks,

Details: Twine 2 | Sugarcube |

Question: I have 1 passage. What I am trying to achieve is a delayed show of multiple lines of text. Example: This is text line 1 (pause 3 seconds) This is text line 2 (shows under Text line 1) (pause 3 seconds) This is Text line 3 (under text line 2)...etc

Attempts: Ive tried using various Javascript codes, which work, but always throws an error of "unexpected token < ". I get this error message, click okay, then the script runs fine. This obviously wont work because of the error msg. it throws.

I then came across this CSS example:
/* make keyframes that tell the start state and the end state of our object */
 
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
 
	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
 
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.two {
-webkit-animation-delay: 10.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.three {
-webkit-animation-delay: 20.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

.fade-in.four {
-webkit-animation-delay: 30.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
.dashdiv { background:grey; margin:5px; width:20px; height:20px; }


Where I give my DIV an ID in the passage. This works great in the Twine application, however, once it exports to HTML, the delays to not work. It simple fades in one after another within a second or so...

Solution? Anyone have any ideas how to accomplish this? Thanks guys and gals!

Comments

  • rgiammaria wrote: »
    Details: Twine 2 | Sugarcube |
    You say SugarCube (I'm assuming v1), yet you've tagged the OP as SugarCube v2. Which is it?

    rgiammaria wrote: »
    Question: I have 1 passage. What I am trying to achieve is a delayed show of multiple lines of text. Example: This is text line 1 (pause 3 seconds) This is text line 2 (shows under Text line 1) (pause 3 seconds) This is Text line 3 (under text line 2)...etc
    In SugarCube v1, you'd either have to use some JavaScript or CSS animations for this.

    In SugarCube v2, you could use the <<timed>> macro for this, in addition to the options available to SugarCube v1. An example of using <<timed>>:
    Some non-animated text.
    <<timed 3s transition>>
    One.... (fades in 3s after the non-animated text)
    <<next>>
    Two.... (fades in 3s after the 'one' text)
    <<next>>
    Three.... (fades in 3s after the 'two' text)
    <<next>>
    Four.... (fades in 3s after the 'three' text)
    <</timed>>
    
    And the CSS to override the default duration of 400ms:
    .macro-timed-insert {
    	transition-duration: 1s;
    }
    

    rgiammaria wrote: »
    Attempts: Ive tried using various Javascript codes, which work, but always throws an error of "unexpected token < ". I get this error message, click okay, then the script runs fine. This obviously wont work because of the error msg. it throws.
    Can't say what's wrong with that, since you haven't provided the code you were trying.

    rgiammaria wrote: »
    I then came across this CSS example:

    […]

    Where I give my DIV an ID in the passage. This works great in the Twine application, however, once it exports to HTML, the delays to not work. It simple fades in one after another within a second or so...
    First. Giving only half the code you're using is unhelpful. You omitted the passage code where you're actually trying to use this.

    Also. You must mean a class, not an ID, as the CSS you've shown uses classes. If not, then that's one of your problems right there.

    Beyond that, your problem is probably the fact that your animation-delay properties have different values. For example:
    .fade-in.one {
    	-webkit-animation-delay: 0.1s;
    	-moz-animation-delay: 0.7s;
    	animation-delay: 0.7s;
    }
    
    Note how the delay specified to the -webkit prefixed version isn't the same as the rest. Beyond that, none of your delays are multiples of three seconds—which you noted above is what you want.

    Additionally, you don't need the -moz prefix. If you were going to include another, besides -webkit, then -o would be a better choice.

    Try this CSS:
    @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @-o-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    
    .fade-in {
    	opacity: 0;
    
    	-webkit-animation: fadeIn ease-in 1;
    	     -o-animation: fadeIn ease-in 1;
    	        animation: fadeIn ease-in 1;
    
    	-webkit-animation-fill-mode: forwards;
    	     -o-animation-fill-mode: forwards;
    	        animation-fill-mode: forwards;
    
    	-webkit-animation-duration: 1s;
    	     -o-animation-duration: 1s;
    	        animation-duration: 1s;
    }
    
    .fade-in.one {
    	-webkit-animation-delay: 3s;
    	     -o-animation-delay: 3s;
    	        animation-delay: 3s;
    }
    .fade-in.two {
    	-webkit-animation-delay: 6s;
    	     -o-animation-delay: 6s;
    	        animation-delay: 6s;
    }
    .fade-in.three {
    	-webkit-animation-delay: 9s;
    	     -o-animation-delay: 9s;
    	        animation-delay: 9s;
    }
    .fade-in.four {
    	-webkit-animation-delay: 12s;
    	     -o-animation-delay: 12s;
    	        animation-delay: 12s;
    }
    
    Usage:
    <div>Some non-animated text.</div>
    <div class="fade-in one">One.... (fades in 3s after the non-animated text)</div>
    <div class="fade-in two">Two.... (fades in 3s after the 'one' text)</div>
    <div class="fade-in three">Three.... (fades in 3s after the 'two' text)</div>
    <div class="fade-in four">Four.... (fades in 3s after the 'three' text)</div>
    
  • My apologies:

    1. I am indeed using version 1.0.34 of Sugarcube. I incorrectly assumed since I downloaded Twine 2 that it would be Sugarcube 2 that was included.

    2. I did in fact mean class, not ID. (Still learning css, so again I apologize for the incorrect naming

    3. It struck me as strange that the css I provided and the code in the passage I omitted, worked fine in the Twine engine, but did not export correctly.

    4. Your css and code you provided worked like a charm, and I am greatly appreciative for it. Thanks for the assistance.
Sign In or Register to comment.