Problems with (set:) and (live:) and (transition:)

DatWeirdFriend

Hey,

I'm using Harlowe and I want to use the transition macro to make a text constantly pulse. Now as I read the transition-time command doesn't work at all, so I made it work like this:


(set: $wub to "Wub wub wub wub wub wub wub wub wub wub")


(live: 0.6s)[(transition: "pulse")[$wub]]

I'm pretty new to coding and I can't find a way to save all those attributes to $wub. There's always an error, a string can't be saved with a value, blabla.

So is there any way to have this (live: 0.6s)[(transition: "pulse")[$wub]] or maybe this (live: 0.6s)[(transition: "pulse")[Wub wub wub]] somehow saved together as one thing?

The only thing I have managed was this:

|wub>[(live: 0.6s)[(transition: "pulse")[Wub wub wub]]]
|bam>[(live: 0.6s)[(transition: "pulse")[Bam bam bam]]]
|uz>[(live: 0.6s)[(transition: "pulse")[Uz uz uz]]]


(live: 3s)[
(replace: ?uz)[(either: ?wub, ?bam, ?uz)]]

I've played around with (either:) but it usually just ignores the (live: 0.6s)[(transition: "pulse")] completely.

And then there is the problem that even if it did work I still had those lines on top because of the named hooks.

I just want [(live: 0.6s)[(transition: "pulse") assigned to a text, and this as three different $whatever, and then swap them every 3 seconds while they keep pulsing like annoying music.

I also tried doing it by hand and without setting up anything, but it seems the different live macros are interfering with each other and also it's quite confusing. I wish it was possible the way I want it with nicely assigned variables I can just shuffle.


What I want is basically this:

(set: $wub to (live: 0.6s)[(transition: "pulse")[Wub wub wub])

{(live:3s)[
(either: $wub, $uz, $Bam)
]}


Despite the fact I can't manage to put this [(live: 0.6s)[(transition: "pulse")[Wub wub]] line in one $whatever.

Please help.

greyelf

Please use the C button in the tool-bar above the Comment field to wrap your code examples within code tags, it makes them easier to read/find.

warning: You may want to get a more experienced CSS coder to look at the following in case it is incorrect or contains incompatibilities.

note: All the following CSS should be placed within your Story Stylesheet area, accessed via the Edit Story Stylesheet menu item.

As far as I know you can't assign a (live:) macro to a $variable but you can place it within a child passage which can then be included within a different passage using the (display:) macro.

The current passage's text.

(display: "child passage containing just the live macro")

I have problems getting Harlowe's pulse transition to work, so I suggest you create your own animation effect.

A animation is generally made up of two parts:

a. The visual effect.
In your case you want the text to change it's scale (to pulsate) and the following CSS defines a pulsate class which can be assign to a HTML element.

@-webkit-keyframes pulsate {
	0% { -webkit-transform: scale(1); }
	50% { -webkit-transform: scale(1.1); }
	100% { -webkit-transform: scale(1); }
}
@keyframes pulsate {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}
.pulsate {
	-webkit-animation-name: pulsate;
	animation-name: pulsate;
}

... the above keyframe is very basic and only changes the scale between two values.

b. The control.
This controls things like the duration of the effect, how many times the effect occurs, how the effect starts and stops, etc...

The following CSS defines a short-infinite class which causes any effect it is associated with to last for three seconds and loop for ever.

.short-infinite {
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

note: you could also add the above CSS directly to the pulsate class but then if you wanted to use different control values for different text you would need to create overriding classes.

You can use the above two CSS classes (pulsate and short-infinite) like so:

<div class="pulsate short-infinite">Wub wub wub wub wub wub wub wub wub wub</div>

Now to combine all of the above with a (live:) macro which allows the text to be changed while the animation effect is doing its thing.

{
(set: $wub to "Wub wub wub wub wub wub wub wub wub wub")
(set: $bam to "Bam bam bam bam bam bam bam bam bam bam")
(set: $zu to "Zu zu zu zu zu zu zu zu zu zu")

}<div class="pulsate short-infinite">|text>[$wub]</div>

(live: 3s)[(replace: ?text)[(either: $wub, $bam, $zu)]]

DatWeirdFriend

Thanks a bunch, greyelf!

DatWeirdFriend

Sadly it's not working, even though I get the idea. There's nothing happening to the text.

"As far as I know you can't assign a (live:) macro to a $variable but you can place it within a child passage which can then be included within a different passage using the (display:) macro."

Guess I know what you mean. Gotta try it.

DatWeirdFriend

Hah! Got it working somehow!

I placed this in a passage:

(display: "wub")

(live: 7s)[(replace: ?wub)[(either: (display: "wub"),(display: "uz"),(display: "bam"),(display: "whoo"))]]

And in the other ones

|wub>[(live: 0.6s)[(transition: "pulse")[Wub wub wub wub wub wub wub wub wub wub wub wub wub wub]]]

etc., depending on names of course.

Now I can display the parent passage somewhere and it switches the "music". The only problem now is that with every time it switches, the rest of the text in the window where it is displayed gets pushed down.

And another question. In the Harlowe manual it says:

Like all commands, this can be set into a variable. It's not particularly useful in that state, but you can use that variable in place of that command, such as writing $var in place of (display: "Yggdrasil").

I don't get the part with $var. What can I write instead of what? I can use a child passage like a variable? I didn't figure out what to type to do so.

greyelf

I have attached an Archive file containing a demonstration of the pulsate CSS, use the Import From File option to add the Pulsate Demo story project to Twine.

DatWeirdFriend

Thanks again for your effort, greyelf! Also the explanations. I downloaded and tried, but the pulsating is for some reason not happening. Text is just changing randomly and that's it.

Edit: Okay...maybe my bad. In the online editor it does work. I'm using the download version of Twine for a while because the online editor kept being down one day.

Wonder why it is like this.

greyelf

Because the forum software likes to eat the attachments of any comment marked as Answer I am attaching another copy of the Pulsate Demo Archive.

Please do not mark this comment.