Transitions in Harlowe?

kopibon

Is anyone using the Transition macro in Harlowe? I can't find much documentation on how it works, just that it exists. I'd be grateful for a simple example.

I was using Daniel Eden's Animate (http://daneden.github.io/animate.css/) but it seems to conflict with Harlowe by loading images/animation twice on page load.

Thanks!

Neoroman

Just took about 5 minutes setting it up on my game, and it plays once and for an infinite amount of time. How exactly is your animation set up?

greyelf

Based on the Harlowe source code of the (transition:) macro it takes two parameters:
1. The Name of the CSS transition to apply. The list of built-in ones seems to be contained in this file as well as in the documentation.
2. The Transition Time, this is optional.

Based on this information I created the following example:


The different built-in transitions:

(transition: "boxflash", 2000ms)[BoxFlash This Text]
(transition: "dissolve", 2000ms)[Dissolve This Text]
(transition: "fade-in", 2000ms)[Fade-In This Text]
(transition: "fast", 2000ms)[Fast This Text]
(transition: "pulse", 2000ms)[Pulse This Text]
(transition: "shudder", 2000ms)[Shudder This Text]
(transition: "shudder-in", 2000ms)[Shudder-In This Text]
(transition: "shudder-out", 2000ms)[Shudder-Out This Text]
(transition: "slow", 2000ms)[Slow This Text]


NOTE: Only the shudder related transitions actually worked with (transition:), the others may be for the (text-style:) macro or just my lack of understanding how it is meant to work.

kopibon

@Neoroman: I added Eden's "animate.css" to the Story Stylesheet... along with these two classes I made to set the z index and location of a character image and a background image:


.bgimg {
position: fixed;
left: 280px;
top: 0px;
z-index: -1;
}
.charaimg {
position: fixed;
left: 280px;
top: 666px;
z-index: 1;
}


And here are how the image tags appear in the Passage:


<img src="images/shop.png" width="1154" height="1112" border="0" usemap="#map1" class="bgimg"/>
<img src="images/charabox.png" width="1154" height="446" border="0" class="charaimg animated bounceInUp"/>


Which works fine in SugarCube and Snowman... the background image is on the bottom layer, and the character image slides in from the bottom of the page, shakes and settles over the background.

But in Harlowe, the character image (aka chatterbox.png, aka class "charaimg") runs the animation on page load and then immediately runs it a second time.

@greyelf Thanks for the examples. I could only get shudder to work for images or text. Maybe the others aren't turned on yet? I tried dissolve and pulse too. I may try to hack the css post export and see if I can get it to work that way without breaking anything.

Thanks, all.