0 votes
by (2.4k points)

Hello there, 

I'm trying to have a text fade-in when it appears. If I don't use <<timed>>,  "<span class='fadeIn2'>Meanwhile...</span>" works, along with this javascript.

postdisplay['fadeIn-text'] = function (taskName) {
    // change 10000 to whatever time you want, in milliseconds

The issue is: it seems the fading begins even before the text is called by the <<timed>> macro. 

<<timed 4s>>
<span class='fadeIn2'>Meanwhile...</span>

Won't show any fade In. 

What to do then?... Thanks a lot.

2 Answers

0 votes
by (23.6k points)
selected by
Best answer

Use css for the fade in effect instead:

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	100% {
		opacity: 1;

Then the following works:

<<timed 4s>>
<span class='fade-in'>Meanwhile...</span>


by (2.4k points)
Works alright, thanks !
+1 vote
by (44.1k points)

As an alternate way of fading in your text you could use the following code.  First, put this in your Stylesheet section:

.delayed {
    opacity: 0;

Then put this in your JavaScript section:

/* Delayed Text code - Start */
$(document).on(':passagerender', function (ev) {
	// Find all elements containing the delayed class.
	var elems = $(ev.content).find('.delayed');
	// Appearance delay (in milliseconds) between each delayed text block.
	var delay = 1000; // 1 second fade-in
	if (elems.length > 0) {
		elems.each(function (i) {
				.delay(delay * (i + 1))
				.fadeTo(delay, 1);
/* Delayed Text code - End */

Now to have your text appear delayed, just put "@@.delayed; ...your text here... @@" around your text, like this:

First paragraph (non-delayed).
@@.delayed;Second paragraph.@@
@@.delayed;Third paragraph.@@
@@.delayed;Fourth paragraph.@@

That will cause each successive ".delayed" block to appear one after another.

Hope that helps!  :-)

by (2.4k points)
Works as well, thanks !
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.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.