Transitions and Animations
Within Harlowe, there is the macro //`(transition:)`// that, naturally, handles different versions of transitions for how hooks appear. Its options are "pulse", "dissolve", and "shudder".
Example:
(link: "Show pulse")[
(transition: "pulse")[Pulse!]
]
To change the normal 0.8 seconds, use //`(transition-time:)`// added to //`(transition:)`//.
Example:
(link: "Show longerpulse")[
(transition: "pulse") +(transition-time: 5s)[Longer pulse!]
]
[[Timing]]Starting with Twine 2.0, there was also the introduction of the //`(live:)`// and //`(stop:)`// macros. Through combining them, timed loops can be created and controlled.
For example:
{
(set: $stopCycle to 4)
(live: 1s)[
(if: $stopCycle is 0)[Rockets away!(stop:)]
(else: )[(set: $stopCycle to it - 1)
Counting down from... $stopCycle]
]
}
[[Timing and Movement]]Using CSS3 @keyframes, animations can be created to achieve different things using purely CSS.
<div class="redYellow">Look! Animation!</div>
[[Putting it all together]]Using the previous timing loops, and with the //`(css:)`// macro, hooks can be "moved" (their CSS position changed) over time.
{
(set: $stopCycle to 0)
(live: 1s)[
(if: $stopCycle is 10)[
Done moving!(stop:)
]
(else: )[
(set: $stopCycle to it + 1)
(css: "position: absolute; left: " + (string: 20 * $stopCycle) + "px" )[Moving!]
]
]
}
[[CSS3 Animations]]{
(set: $stopCycle to 0)
(live: 1s)[
(if: $stopCycle is 10)[
Done moving!(stop:)
]
(else: )[
(set: $stopCycle to it + 1)
(css: "position: absolute; left: " + (string: 20 * $stopCycle) + "px" )[<div class="redYellow">Moving and animating!</div>]
]
]
}