widget.js

var A = require("alloy/animation");
var _args = arguments[0] || {};
var panelView = null;

_args.controller = _args.controller || null;
_args.parent = _args.parent || null;

/**
 * PANEL ANIMATIONS
 */
var animate1 = Ti.UI.createAnimation({
    //opacity: 1,
    left: (_args.offset - 10) || "200dp",
    duration: 300,
    curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
}), animate2 = Ti.UI.createAnimation({
    left: _args.offset || "210dp",
    duration: 150,
    curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT,
});
    
exports.open = function() {
	
	_args.controller && A.chainAnimate($.panel, [ animate1, animate2 ], function(){	
		panelView = Alloy.createController(_args.controller);
		$.panelContent.add(panelView.getView());
		
		if(OS_IOS) {
			A.fadeIn(panelView.getView(), 300, function(e){
				Ti.API.info("FADE IN ANIMATION COMPLETE FOR CONTROLLER: "+_args.controller);
			});
		}
	
	});
}

exports.close = function() {
	A.fadeAndRemove($.panel, 100, _args.parent, function(){
		$.panel.remove(panelView.getView());
		_args.parent.remove($.panel);
		panelView = null;
		$.panel = null;
	});
	
}

widget.xml

<Alloy>
  <View id="panel" class="container">
		<View class="shadow" />
		<View id="panelContent" />
	</View>
</Alloy>