Hey all! Writing a (super simple) Twine story, and I’m having trouble with the Dissolve transition. I want to have multiple lines fade in one by one, and it mostly works great, but for some reason the first line disappears for a fraction of a second the moment its transition has completed. It’s like a little blink. Any help would be appreciated! Here’s the code:
I did manage to see the little flicker a few times, but it didn’t happen every time for me. I’m not sure why it’s happening, but it went away (as far as I can tell) for me when I got rid of the (live: 0s). Since you want it to start at the beginning, you don’t really need the live hook. The dissolve will run as soon as the passage starts, which is the same as starting at 0 seconds.
Thank you so much for the help!! This made it happen less often, and it got me on the right track. After taking your suggestion, I actually took the dissolve transition off of the first line completely (letting Twine fade that line in by default like it does every passage), and deleted the square brackets around the first line. That seems to have solved it completely!
There’s another passage in the story that does a similar “lines fading in one-by-one” thing. That one I was able to solve by making the dissolve transitions no shorter than 0.8 seconds. Any shorter than that and you get the blinking problem.
That’d really interesting. I wonder if the default passage fade in is interfering with the fade in you’re using if they’re running at the same time. Maybe that’s what the 0.8 is, the fade in time for the default passage transition.
Oh fascinating, that sounds very probable. Maybe a different way to get around this would have been to disable the default transitions. I thought I heard somewhere you can do that. I’m still very much a Twine novice, so I haven’t delved into stuff like that yet.
WARNING: For simplicity sake the following information is conceptually correct, but not 100% technically correct.
Harlowe’s Passage Transition effect consists of:
A multi stage rendering process.
Some ‘fade-in’ related CSS.
The multi stage rendering process basically consists of:
Processing the content of ‘current’ Passage to generate the related HTML elements. To make things easier I will refer to this as the ‘Passage-HTML’
Wraps the ‘Passage-HTML’ within a custom HTML element, that is added to the page’s Document Object Model (DOM), which causes that HTML structure to get ‘rendered’.
After a short delay the custom HTML element (and its child elements) gets deleted from the page’s DOM.
The ‘Passage-HTML’ is directly added to the page’s DOM again, which causes it to be ‘rendered’ again. (this can cause the ‘blink’)
Any custom CSS animation / transformation / etc effects that trigger’s between the 1st and 2nd rendering of the ‘Passage-HTML’ (or just after it) can produce strange results.