Removing transition completely from certain passages

convictedweirdo

Ahoy,

I've been scouring the forum for an answer for this but I'm not quite getting the effect I'm after.

I'm using twine 2 and sugarcube 2.7.0, and require certain passages to have no transition effect. Most of the text in the passage remains the same, except for maybe 1 or 2 lines and a counter that tracks the players gold.

It's a "shop" screen with two rows of items, one on the left side and one on the right side (left being seller's inventory, with the right being your own). I'm using a click macro which adjusts the qty of items and sets a few other variables, and then adds it to the column on the right, forcing a refresh for all values using a "goto" macro and referencing the same passage.

I've reduced it to almost nothing using some CSS and tagging the passages I wanted affected with 'notransition'

.passage.notransition
{
transition: none;
-webkit-transition: none;
-moz-transition: none;
}

But there is still a brief flicker.

As per a suggestion on another thread, I also tried using

<<timedcontinue 1s>>

<<addclass ".passage" "notransition">>

to the passage but there was still no change in the flicker.

Any help is appreciated.

Claretta

I could never figure out a good way to do this.

The best way would be to do an artistic workaround, where for example you had a small fade to black each time the player bought something and a sound effect.

Assuming your html background colour is black, you can trigger before the goto:

<<script>>
$(document).ready(function (){
$('body').css('opacity', '0').fadeTo(1500, 1,'swing'); 
});
<</script>>

This will fade the whole screen to black and then back in again. This would hide any flicker in the inventory, and probably look more artistic overall.

If you want to rapidly buy lots of small items it wouldn't be useful, but it's one example of how the problem could be approached.

Claretta

Ok so after some tests the issue can be solved, but it's a lot more involved than simply adding a few css classes.

You need to add in a custom shop passage, since the default passages suffer from a bit of a display bug where they don't respect no transitions, but custom passages do.

Follow the instructions (you'll need to download twine 1 to load the file but the concept will work in Twine 2) in the Right Hand Side box tutorial for SugarCube 1

http://www.motoslave.net/sugarcube/1/

and use it to create a new inventory div on the page with the same css as your existing one so it displays the same. Then put your shop passage code here.

You should also be able to do something like bring it to the forefront by something like

.passage.invisible {
display: none;
}

to hide the original passages when the shop is open, and simply use the shop div for these screens. At all other times use a display: none; control on the shop css to hide it.

There's a fair bit of work involved in getting this custom div to display as you want so I can't provide copy and paste code, but hopefully this puts you on the right track.

You can put links inside the shop custom div but you'd also have to link it into what's going on in the passages to update. In Twine, everything gets driven by the main passage, even if it's invisible. For example, to switch screens you'd write in your custom shop passage:

<<if tags().contains("shop")>>test 1
<<click "refresh this page">><<goto "shop main passage">><</click>>
<</if>>

And then tag your now hidden main passage with "shop" in addition to "invisible". This would both hide the main passage and trigger your goto to refresh the page when needed, but also trigger the shop passage to display text to take over.


So in sum:

1. Create a new custom passage
2. Give this passage the same css as existing passages
3. Trigger its activation when the main passage has specific tags and at the same time hide the main passage from displaying (but it'll still be working underneath as the engine)
4. Use display: none on the shop passage css when it is not being used to stop it from interfering with the main passage.

greyelf

Is there a reason you have to refresh the current passage and can't use a parent/child passage setup instead?

1. Parent Shop passage:

<<set $shopStuff to ['aaa', 'bbb', 'ccc']>>
<<set $myStuff to ['ddd', 'eee', 'fff']>>

<div id="stock"><<display "Buy and Sell Stock">></div>

2. Child Buy and Sell Stock passage:

Shop Stuff:
<<for _i to 0; _i lt $shopStuff.length; _i++>>
<<print (_i + 1) + ". <<click '" + $shopStuff[_i] + "'>>" +
	"<<set $shopStuff.pop('" + $shopStuff[_i] + "')>>" +
	"<<set $myStuff.push('" + $shopStuff[_i] + "')>>" +
	"<<replace '#stock'>><<display 'Buy and Sell Stock'>><</replace>>" +
	"<</click>>">>
<</for>>

My Stuff:
<<for _i to 0; _i lt $myStuff.length; _i++>>
<<print (_i + 1) + ". " + $myStuff[_i]>>
<</for>>

I understand your code will be more complex but the technique should still work and does not require using a <<goto>> to refresh the current passage.

convictedweirdo

Thanks guys, I'll be playing around with this tonight and let you know how I go

TheMadExile

convictedweirdo wrote: »

I've reduced it to almost nothing using some CSS and tagging the passages I wanted affected with 'notransition' […] But there is still a brief flicker.

What you've done does remove the transition animation itself—though you've botched the vendor properties. You have not addressed the other half of the animation, however, which is the opacity change on the incoming element.

SugarCube v2 already includes a properly setup no-transition class (named no-transition), which would be easier than trying to roll your own. You can get as close as possible to what you want via tagging your passage with no-transition and using the following style rule:

.no-transition.passage-in {
	opacity: 1;
}

The no-transition class itself will negate the transition, while the above style rule will also cause the incoming passage's opacity change to be negated in the presence of the no-transition class.

This is not without its drawbacks, however:

• The shop passage will have no transition at all with the above setup. Meaning that in addition having no transition when updating itself, there will be no transition whenever the player enters the shop. That may or may not be important to you.
• This only removes the transition. Depending on the eventual contents of the shop passage, you might still get a bit of a flicker—I cannot say for sure—due to page reflows. Passage navigation replaces the entire passage element, which forces the browser to reflow/repaint a, possibly, significant portion of the viewport.

That said. I'd try this first. If you do see some flicker or not having an entering transition is a deal breaker, then there is always the method suggested by @greyelf.

Basically, when updating the page it boils down to the following. The less of the page you update, and the less you make the browser have to reflow things, the smoother the updates will go.

PS: Please don't use <<goto>> with <<click>> simply to return to the same passage—<<click>> can already do that. Using <<goto>> should be your last resort, not your first. For example:

/* This will work in any version of SugarCube v2 (or v1). */
<<click [[Buy, sell, whatever!|passage()]]>> … <</click>>

/* This will work in SugarCube v2.7.0+. */
<<click "Buy, sell, whatever!" `passage()`>> … <</click>>

convictedweirdo

Thanks, @TheMadExile, that did exactly what I wanted.

Before using twine and sugarcube I knew nothing about any of this kind of stuff, so it's refreshing to actually get answers that are well explained.

Also cheers @greyelf and @Claretta for your help.

Claretta

The reason I suggested my method is I use several custom passages in my own story and notice they have no transition or flicker at all when updating numbers unless I tell them to. Hence I'm fairly confident that it should work, even if it is a bit complex.

EDIT: Posted at same time as above reply before I read it.