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.7k 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 !