Sequence-specific animation?

[Springer]

Picking up from the PageTurner thread:

@saqimtiaz

It sounds like you want a new storyview that animates tiddlers horizontally.

Alas, not quite — my worry was precisely that tiddlywiki’s core wants all story-river tiddler out/in animation to be be centrally controlled by a story view which offers exactly one “in” animation and one “out” animation, which would be disappointing.

What I would love is to be able to designate certain sequences (say, tiddlers tagged as “sessions” within a teaching wiki), with their own “previous session” and “next session” buttons, which would animate within that sequence horizontally (“next” slides in from right, while current tiddler slides out to the left, opposite for the “previous” button).

For handling of all ordinary links — both from within a tiddler and from the sidebar — I’d want to keep the old classic storyview protocol (origin tiddler is still in story river, link causes new tiddler to appear with familiar animation).

Ideally, this all would work within the actual story river. In other words, when you link to a session tiddler, it opens as usual, and its view template includes these special navigation-with-animation buttons, so you can browse forward and back in the sequence, with story river list including only the tiddler that’s actually displaying. (I haven’t yet thought about how the story river would respond to attempts to open multiple sessions independently within the story river; it might be that the story river only allows one of these sessions to be open at a time, so opening one from the sidebar displaces whatever session currently lives in the story river.)

Your swiffy “container” tiddler solution, linked above, has the style of sliding animation effect I’d want… If only it could look like one whole tiddler is giving way to the next (with all of its view template elements, something I’m optimistic I could mostly engineer), and if only the included tiddlers were fully responsive just as they would be in the story river. (This last thing is the problem I’m not optimistic about being able to fix with my own skills. With your swiffy solution, the horizontally-ordered transclusions behave as if they’re behind plexiglass, waiting to be dragged left or right but otherwise missing some of the their content-interaction affordances.)

@saqimtiaz

With regards to Swiffy, if you are able to provide an example where some of the click interaction is disabled, that would be helpful. The selective disabling of only some click events sounds quite surprising.

At your site, just click on “essay or novel” link within the second slider pane…

On all my attempts, it does nothing, though when the HelloThere tiddler itself is in the story river, this works as a link to the Molina tiddler. (And I found this to be true at your site only after installing and configuring the plugin at my own wiki, finding on my site that within-tiddler tab-selection clicks were getting through, while link-clicks were not working… I thought I’d done something wrong until I checked at your demo site.)

EDIT: Maybe it would not be so hard to solve this “plexiglass” problem, assuming I’m willing to just give up the “drag to slide” affordance — which is surely the thing interfering with ordinary mouse interaction… it’s a very cool effect you have there, but not worth losing fine-grained interaction with the sliders’ content, if that’s the tradeoff.

[saqimtiaz]

@Springer

On all my attempts, it does nothing, though when the HelloThere tiddler itself is in the story river, this works as a link to the Molina tiddler.

This is a result of the feature that allows the sliders to be draggable with the mouse and not just on touch devices, to reduce the chance of accidental clicks while dragging. Removing the class slider-nav-mousedrag from that demo will disable that feature and allow the contents to be fully interactive, while still allowing navigation within the sequence using previous and next buttons. On mobile, that is already the case even with this feature enabled.

@Springer

What I would love is to be able to designate certain sequences (say, tiddlers tagged as “sessions” within a teaching wiki), with their own “previous session” and “next session” buttons, which would animate within that sequence horizontally (“next” slides in from right, while current tiddler slides out to the left, opposite for the “previous” button).

For handling of all ordinary links — both from within a tiddler and from the sidebar — I’d want to keep the old classic storyview protocol (origin tiddler is still in story river, link causes new tiddler to appear with familiar animation).

So here is how I would attempt to implement this:

• a custom view template for all tiddlers that are to be considered sequence tiddlers. The view template should be for the entire tiddler, not just the body. This will allow the title and subtitle to also be animated.
• a mechanism to animate the navigation within the sequence. Either something like swiffy, or a custom storyview written in JavaScript. The storyview would only handle navigation within the sequence and all other navigation would be handled by the story river as usual.
• in terms of affordances, if you also want the view toolbar buttons to target the appropriate tiddler in the displayed sequence that could get hairy.

Edit: it would be pretty easy to adapt Swiffy to still allow interaction with links and buttons with a specific class when mouse drag is enabled, such as tc-tiddylink or tc-button.

[Scott_Sauyet]

@Springer

What I would love is to be able to designate certain sequences (say, tiddlers tagged as “sessions” within a teaching wiki), with their own “previous session” and “next session” buttons, which would animate within that sequence horizontally (“next” slides in from right, while current tiddler slides out to the left, opposite for the “previous” button).

Not that I have any idea how to do it or time to work on it soon, but this sounds like at would be a great addition to my WizardNav demo.

[saqimtiaz]

@saqimtiaz

Edit: it would be pretty easy to adapt Swiffy to still allow interaction with links and buttons with a specific class when mouse drag is enabled, such as tc-tiddylink or tc-button.

This CSS should allow the slide contents to be interactive:

.slider-nav-mousedrag .slider-container::after {
    display: none;
}

[saqimtiaz]

@springer I made a few updates to the demo that I posted for you earlier.

I am curious what you would want do about the title and subtitle of the sequence tiddler itself. Hide them? That might be confusing since then the displayed title would not match what was shown in the Open sidebar tab.