Dynamic visual effects for SugarCube 2.21.0

Question

Hi there,

Super new to Twine and I'd really like to add a 'pulse' effect to my text to resemble a phone buzzing, but I can't seem to figure it out!

The only other dynamic text effect I'm using is a slow fade. I've got this on my Stylesheet:

.slowfade .macro-repeat-insert,
.slowfade .macro-timed-insert {
	-webkit-transition-duration: 400ms;
	-o-transition-duration: 400ms;
	transition-duration: 400ms;
}

Followed by this on my page in html:

<span class="slowfade">

text

</span>

I've tried adding these macros suggested here onto my Stylesheet, but I can't seem to get any of them to work using the @.effect text @@.

Any ideas?

Thanks very much Twine community!

Answer 1

This comment in the Examples of jQuery and CSS animations question includes an example of how to use the CSS based Text Styling Effects I converted for SugarCube.based on those contained within Harlowe v2.1.0

Comments

Hey there, thanks for this! It works great!

Trying to figure out how I can have the shudder effect only animate for 1s. I tried to use

animation-duration: 1s;

and

animation-iteration-count: 1;

but neither worked. Anyone know what I'm missing?