"Slowly" is a very vague term because it doesn't explain how long the delay is, nor how long you think the delay should be. eg. Is the delay 0.5 seconds, 2 seconds, 10 seconds, 30 seconds?
There are a number of issues with your existing code like: targeting the wrong CSS selectors; missing or misplaced HTML element end-tags; uninitialised story variables; comparing Boolean story variables to is true and is false; not using an (if:) and (else:) macros combination to handle the situation when you want to do something for both values of a Boolean variable;
You are using the Passage Transition process (eg. the (goto: "character") macro call) to redraw the avatar's clothing images (and the rest of the UI) each time any link on the page is selected. and unfortunately it takes time for that process to do all the background things it needs to do.
(like: update the History system; process the passage contents to generated the resulting HTML elements; re-render the HTML page; etc..)
It would be better to only update the portion of the page that is actually changing instead of updating the whole page.
1. The following is a quick replacement for your own CSS.
It targets the tw-story element instead of the body element for font and default colours; it targets a tagged passage for the font size reduction instead of the whole story. it removes the unused .visited selectors; and it adds some extra selectors for the re-structured HTML of the character passage.
warning: I didn't check the CSS of all your selectors, so there may still be issues with some of it.
tw-story {
font-family: "Lucida Console", Monaco, monospace;
background-color: #000B06;
color: #00BBFF;
/*line-height: 0.1em;*/
}
tw-passage[tags~="small-font"] {
font-size: 40%;
}
tw-link, .enchantment-link {
color: #00bbff;
}
tw-link:hover, .enchantment-link:hover {
color: #e8ffff;
}
tw-include[type="startup"] {
display: none;
}
.transition-in[data-t8n^=dissolve] {
-webkit-animation:appear 0ms step-start;
animation:appear 0ms step-start
}
#wapper {
position: relative;
float: left;
overflow: hidden;
}
#characterContainer {
position: relative;
float: left;
height: 500px;
}
#characterContainer img {
position: absolute;
float: left;
top: 0px;
left: 0px;
}
#textContainer {
line-height: 1.3;
position: absolute;
float: left;
width: 220px;
height: 230px;
top: 70px;
left: 370px;
}
#textContainer ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0,0,0,32px;
overflow: hidden;
}
#textContainer ul li {
display: inline-block;
}
2. Initialise your story variables in a startup tagged special passage instead of your Start passage.
3. I assigned a small-font Passage Tag to your character Passage which allowed me to style it differently to all the other passages of your project by targeting the tw-passage[tags~="small-font"] selector in the CSS in point 1.
4. Replacing the story variable assignments and #wrapper div element of your character Passage.
I changed the checking of the Boolean variables to use (if:) + (else:) combinations, and used named hooks to allow the future targeting of each of the images that make up the clothing layers.
{
(if: $armsOpen)[(set: $arrowArms to "vArms")](else:)[(set: $arrowArms to ">Arms")]
(if: $legsOpen)[(set: $arrowLegs to "vLegs")](else:)[(set: $arrowLegs to ">Legs")]
(if: $pelvisOpen)[(set: $arrowPelvis to "vPelvis")](else:)[(set: $arrowPelvis to ">Pelvis")]
(if: $shouldersOpen)[(set: $arrowShoulders to "vShoulders")](else:)[(set: $arrowShoulders to ">Shoulders")]
(if: $torsoOpen)[(set: $arrowTorso to "vTorso")](else:)[(set: $arrowTorso to ">Torso")]
(if: $headOpen)[(set: $arrowHead to "vHead")](else:)[(set: $arrowHead to ">Head")]
(if: $torsoId is 1)[(set: $letter1 to "HIGUYS")]
<div id="wrapper">
<div id="characterContainer">
<img src="BG-z1/Layer-11.png" class='character'>
|arms-L>[(print: "<img src='Arm-z2/Arm-L-" + $armsLId + ".png'>")]
|arms-R>[(print: "<img src='Arm-z2/Arm-R-" + $armsRId + ".png'>")]
|legs-L>[(print: "<img src='Legs-z3/Leg-L-" + $legsLId + ".png'>")]
|legs-R>[(print: "<img src='Legs-z3/Leg-R-" + $legsRId + ".png'>")]
|pelvis>[(print: "<img src='Pelvis-z4/Pelvis-" + $pelvisId + ".png'>")]
|shoulders-L>[(print: "<img src='Shoulders-z5/Shoulders-L-" + $shouldersLId + ".png'>")]
|shoulders-R>[(print: "<img src='Shoulders-z5/Shoulders-R-" + $shouldersRId + ".png'>")]
|torso>[(print: "<img src='Torso-z6/Torso-" + $torsoId + ".png'>")]
|head>[(print: "<img src='Head-z7/Head-" + $headId + ".png'>")]
</div>
}
5. I suggest replacing each individual clothing section within your #textContainer div element with a HTML structure based on the following example.
It uses (link-repeat:) macros to allow each numbered link to be clicked multiple times, and it uses (replace:) macros to update only the image contained within relevant named hook instead of the whole page via a Passage Transition.
<section>
(link: "$arrowHead")[(set: $headOpen to not $headOpen)(goto: "character")]
(if: $headOpen)[
<ul>
<li>(link-repeat: "0")[(set: $headId to '0')(replace: ?head)[<img src='Head-z7/Head-0.png'>]]</li>
<li>(link-repeat: "1")[(set: $headId to '1')(replace: ?head)[<img src='Head-z7/Head-1.png'>]]</li>
<li>(link-repeat: "2")[(set: $headId to '2')(replace: ?head)[<img src='Head-z7/Head-2.png'>]]</li>
<li>(link-repeat: "3")[(set: $headId to '3')(replace: ?head)[<img src='Head-z7/Head-3.png'>]]</li>
<li>(link-repeat: "4")[(set: $headId to '4')(replace: ?head)[<img src='Head-z7/Head-4.png'>]]</li>
<li>(link-repeat: "5")[(set: $headId to '5')(replace: ?head)[<img src='Head-z7/Head-5.png'>]]</li>
<li>(link-repeat: "6")[(set: $headId to '6')(replace: ?head)[<img src='Head-z7/Head-6.png'>]]</li>
<li>(link-repeat: "7")[(set: $headId to '7')(replace: ?head)[<img src='Head-z7/Head-7.png'>]]</li>
<li>(link-repeat: "8")[(set: $headId to '8')(replace: ?head)[<img src='Head-z7/Head-8.png'>]]</li>
<li>(link-repeat: "9")[(set: $headId to '9')(replace: ?head)[<img src='Head-z7/Head-9.png'>]]</li>
</ul>
]
</section>
note: Ideally the 'arrow' related link should also be replaced with one that is smart enough to only updated the related Link Text and that uses CSS to show/hide the ul element.