animation in splitpane?

[mathias]

Hi, playing around a bit with splitpane. I have a dynamicform in the detailpane, and i want to have a button that shows a pane with information "on top" of the form.

The only way i've found is to simply switch detailpanes back and forth between the form and the info pane with setDetailPane() on the splitpane object. It works, but it might look better if it had some animation where the form for example fades out, and the infopane fades in.

Is there some way to accomplish this in an orderly fashion?

EDIT:
I have managed to get some animation out by putting a vlayout in the detailpane, adding both form and infopane to it and showing/hiding them with animations. It only semi-works though, since only one is animated and the other blips out.

infoPane =  new BackButtonVLayout(() -> hideInfoPane());
        infoPane.addMember(new Label("BANANA"));
        infoPane.setAnimateTime(300);
        infoPane.setAnimateHideEffect(AnimationEffect.FADE);
        infoPane.setAnimateShowEffect(AnimationEffect.FADE);
        detailPane.addMember(infoPane);

        details.setAnimateHideEffect(AnimationEffect.FADE);
        details.setAnimateShowEffect(AnimationEffect.FADE);
        details.setAnimateTime(300);
-----
private void showInfoPane() {
        infoPane.animateShow();
        details.animateHide();
    }

I suppose what i am after is either crossfading the 2 components, or some way to make the infopane slide in on top of the form, then hiding the form. Is this at all possible?
All your examples are one-component, i couldn't find any animated transitions between components.

[Isomorphic]

We wouldn't recommend a slide animation for this use case, since the point of slide animations in SplitPane and in mobile applications in general is to give the user an intuitive physical sense of how the various screens are spatially. If you use a slide animation, then "Back" should go back to whatever slid out of view. So you might consider making the detail pane tabbed instead.

Attempting simultaneous animateShow and hide in the same layout will cause the prior animation to complete immediately, because the system will think the new animation takes precedence.

You could put both components inside a separate Canvas container to avoid this.

Or you could just use CSS3 Transitions, which is ultimately going to look smoother - our animation predates CSS support for animations, and is achieved via repeatedly setting the opacity property using timers.

[mathias]

OK, so this is one of my use cases for this:

In a form, i have a question mark for some fields, requiring a bit of explanation. I don't want a tab, i was looking for a nice transition for an info pane to slide in on top of the form when the user clicks on a question mark. So the spatial sense is actually what i'm after.

It would be great if this could be done, but for now, i just fade in the component that is supposed to be topmost. When the user presses the back button, i just fade it out again.

It works, but it's not perfect... :)

(Previously we had a popup, but we're trying to move away from popups whenever we can. In any case, i don't think 2 tabs is a good way to solve this specific scenario.)

Thanks for explaining a bit about the queuing of animations.

[Isomorphic]

You can do a slide animation to your help pane, since that's another type of programmatic animation (animateMove()), and also obviously something built into CSS animations.

However be careful about preserving that spatial sense of navigation for your end users: if you transition spatially toward the right to show some help information, then going "Back" should just get rid of the help information, not go back to the listPane, since going back to the listPane breaks the spatial metaphor.

If you want to keep a Back button that goes to the listPane regardless of whether you are viewing help information when you press it, then a fade or pop-up window may be better.

[mathias]

i totally agree about the help information spaciality, that's precisely what i'm aiming for, and why i'd prefer a slide to fade in/out. I'll try the slide again, couldn't get it to work last time. Thanks!