Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How to make slow fade-in text on sugarcube?

Hi guys,

I would like to know how to make text fade-in slower than the default fade-in on sugarcube. I already can time the initial moment of the fade-in but the fade-in on itself is too fast. I would like it slow for dramatic purposes! :)

Here is a sample of the code:

Yada-yada-yada!<<timed 2s t8n>> Yada?<</timed>>

Thanks in advance!


  • edited August 2016
    Try something like the following, which uses the default duration: (goes in Story Stylesheet)
    .macro-timed-insert {
    	-webkit-transition-duration: 400ms;
    	-o-transition-duration: 400ms;
    	transition-duration: 400ms;
    You'll want to change the three 400ms duration values to something longer—e.g. 3s.
  • Hi, TheMadExile,

    Thank you very much for your response. It is helpful!

    But I should be more precise with my question. What I would like is to change the duration of the transition only in certain sentences.

    Is it possible?

    I think that the solution you propose will change the overall duration of all transitions, isn't it?

  • My original example does change all <<timed>> and <<repeat>> transitions, yes.

    To change only certain ones you'll need to do something like the following.

    Prefix each of the selectors from my previous example with a class—e.g. slowfade—which will allow you to control when the rule is applied. For example:
    .slowfade .macro-repeat-insert,
    .slowfade .macro-timed-insert {
    	-webkit-transition-duration: 400ms;
    	-o-transition-duration: 400ms;
    	transition-duration: 400ms;
    Once done, the style rule will not be active by default.

    To activate the style rule on a per-passage basis, simply tag the passages in question with a tag based on the name of the class—e.g. slowfade.

    To activate the style rule on a per-<<timed>> basis, simply wrap the <<timed>> macros in question within a custom styles or HTML markup containing the class—e.g. slowfade. For example:
    /* HTML Markup */
    Yada-yada-yada!<span class="slowfade"><<timed 2s t8n>> Yada?<</timed>></span>
  • So simple and yet so effective! Thank you very much!

Sign In or Register to comment.