How to dynamically change transition speeds from passage to passage.

puppetz87

I'm really bad at CSS, selectors, and classes in general, and I can't seem to figure out how to change the passage transitions. I'm using Twine 2, Sugarcube 2.

What I'm trying to do is to make some passages tagged with "t8n-400ms" to ease in at 400ms (the default), and some other passages tagged with "t8n-1000ms" to ease in at 1000ms. How do I do that? Any help would be appreciated. I tried the code on glorious trainwrecks on tagged css, but I couldn't seem to get it to work... mainly because I don't understand it at all.

Jud_Casper

This goes in the Story Stylesheet. Hopefully it will do the trick.

body.t8n-1000ms .passage {-webkit-animation: slowfade 1000ms; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: slowfade 1000ms; /* Firefox < 16 */
        -ms-animation: slowfade 1000ms; /* Internet Explorer */
         -o-animation: slowfade 1000ms; /* Opera < 12.1 */
            animation: slowfade 1000ms;}
@keyframes slowfade {from {opacity: 0;} to {opacity: 1;}}
/* Firefox < 16 */
@-moz-keyframes slowfade {from {opacity: 0;} to {opacity: 1;}}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes slowfade {from {opacity: 0;} to {opacity: 1;}}
/* Internet Explorer */
@-ms-keyframes slowfade {from {opacity: 0;} to {opacity: 1;}}
/* Opera < 12.1 */
@-o-keyframes slowfade {from {opacity: 0;} to  {opacity: 1;}}

As for the other, if 400ms is the default, you don't need to tag it.

TheMadExile

@Jud_Casper SugarCube's passage transitions use the transition property. Your solution is… overly complicated.

@puppetz87 First. Virtually nothing from Glorious Trainwrecks will work in SugarCube without modification. They are all—or very nearly so—meant for the Twine 1.4 vanilla story formats and are not fully compatible with SugarCube. I'd remove anything you got from there.

Second. As noted by Jud_Casper, you don't need to tag passages which should use the default transition—because, obviously, it's the default.

You may use the following CSS to change the duration of passages tagged with t8n-1000ms:

body.t8n-1000ms .passage {
	transition-duration: 1s;
}

Jud_Casper

Yes, I'll admit that is ever so slightly less complicated

My version was one of those rare instances where I was determined to source the answer for myself for once, instead of relying on the forum.

I'll know better next time.

puppetz87

Thanks guys. Works like a charm.