Two Panels in Sync Transition

wondering if there's a way that i can have two panel components next two each other. both have animated transition. however, as i'm dragging the first panel component, i want the second component to mock the first. i thought about using the onTransitionStart function to move the second, but i'm pretty sure that wouldn't work. also, as i'm dragging the first, i can drag it before before fully committing, and i'm sure my approach wouldn't allow me to bail the transition like i can in the first component by pulling my finger back to the starting position and disengaging. any ideas?

the first component will have images, and the second component will have some text info. just through it might be a neat effect for the two to transition simultaneously.

any ideas? thanks!


  • If they need to move together, can they be a single panel? If one needs to go on top of the other on narrow screens, you could make the Panel containing them be a Panels w/ a CollapsingArranger.
  • edited December 2014
    It depends a little on what you want to do *exactly* when you drag a panel.

    If both panels should slide their current content item out of view and reveal the next content item while? I'd make 2 stacks of panels. One for all the image panels, and one for all the text panels.

    Then if the selected index of one panel is changed, propagate the change to the other.
  • Another option, you could create 2 stacks of panels, one for all the image panels, and one for all the text panels. Then you wrap both these stacks in another component.

    The wrapper could then capture the usual events a enyo.Panels responds to, pass a clone of the original event to both panels and prevent the natural propagation of the original events.

    Completely untested, might fail horribly, but you'll probably get the gist:
        name: "PanelSynchronizer",
        components: [{
            name: "imagePanels",
            kind: "enyo.Panels"
        }, {
            name: "textPanels",
            kind: "enyo.Panels"
        handlers: {
            ondragstart: "dragstart",
            ondrag: "drag",
            ondragfinish: "dragfinish",
            onscroll: "domScroll"
        dragstart: function(inSender, inEvent) {
            this.$.imagePanels.dragstart(inSender, enyo.clone(inEvent));
            this.$.textPanels.dragstart(inSender, enyo.clone(inEvent));
            return true;
        drag: function(inSender, inEvent) {
            this.$.imagePanels.drag(inSender, enyo.clone(inEvent));
            this.$.textPanels.drag(inSender, enyo.clone(inEvent));
            return true;
        dragfinish: function(inSender, inEvent) {
            this.$.imagePanels.dragfinish(inSender, enyo.clone(inEvent));
            this.$.textPanels.dragfinish(inSender, enyo.clone(inEvent));
            return true;
        domScroll: function(inSender, inEvent) {
            this.$.imagePanels.domScroll(inSender, enyo.clone(inEvent));
            this.$.textPanels.domScroll(inSender, enyo.clone(inEvent));
            return true;
Sign In or Register to comment.