Fade in and out image in Harlowe

Authoring Twine
1

Twine Version: latest
[also choose a Story Format tag above]

Hey Y’all!

So yeah. I want to learn how to make images fade in and out. Not the background, but an image from the background. Let say the background i black, and I want an image of a character to come out of that background how would I do that?

Cheers
Dalloway.

2

The simplest way is to use Harlowe’s transitions…

(transition:"fade") + (transition-delay:1s) + (transition-time: 6s)[ <img src="image.png"> ]

…and you can stack properties, as seen above. I believe "dissolve" also does the same thing.

Note: I’ve found that if the very first passage has an image transition on it, it can stutter while the browser loads. A delay can solve that, but in subsequent passages, the delay is not necessary. However, a little breathing room before a transition is sometimes nice. You can use tenths of a second as well.

Edit: This only works for revealing an image. I’ll have to give it some thought about how to hide an image slowly with Harlowe’s own code, if you still need that. It can be done with raw CSS though. I’ll figure out an eloquent way for that to be coded in your story later today, if Greyelf doesn’t read this and solve it before I get back. :wink:

1 Like
3

Yeah this works like a charm! And it would be great to be able to hide it to. This is going to be in the choose your character part and different other. But It would be cool if I could click on the character name and the image with text would fade in, and when I click on next one, the first would fade out and the new fade in.

But so far, this is exellent. Im gone do some transitions tutorials so I get the hang of it all…
thanks! :slight_smile:

1 Like
4

Sorry about the delay. I was zonked right out yesterday.

I could only find a way to fade out the entire passage when transitioning to another passage in Harlowe. I didn’t see a way to reverse a transition. Maybe there is a way, maybe there isn’t.
Harlowe: Transitions

In any case, here is some CSS and JavaScript to help you:

<style>tw-hook[name="imagehook"] {
	opacity: 0;
	transition: opacity 1.5s ease 0s;
}</style>

|imagehook>[<img src="image.png">]

(link-rerun: "FadeIn")[{<script>
document.getElementsByName("imagehook")[0].style.opacity = "1";
</script>}]

(link-rerun: "FadeOut")[{<script>
document.getElementsByName("imagehook")[0].style.opacity = "0";
</script>}]

…assuming you have the code to switch the images, you may have to put a delay before switching the image to allow the transition to finish fading out. (after: 1.5s). If you are using (replace:) to swtich out images, the new image will revert back to 0 opacity with this existing code. You could also put a name attribute in your <img> tag and reference that directly with the CSS styles and JavaScript.

If you get really good with all three of HTML, CSS and JavaScript, you will be able to cross-fade between images, instead of fade in and out between them.

Note: Harlowe makes all hook names into lowercase and removes any underscores. Make sure your JavaScript uses the right name. ( “Image_Hook” in Harlowe becomes “imagehook” in HTML,CSS and JavaScript.

1 Like