diff --git a/src/DefaultRenderer.js b/src/DefaultRenderer.js
index 4337862cf..aed2f065b 100644
--- a/src/DefaultRenderer.js
+++ b/src/DefaultRenderer.js
@@ -13,6 +13,12 @@ const {
     RootContainer: NavigationRootContainer,
     Header: NavigationHeader,
     } = NavigationExperimental;
+
+const {
+    CardStackPanResponder: NavigationCardStackPanResponder,
+    CardStackStyleInterpolator: NavigationCardStackStyleInterpolator
+    } = NavigationCard;
+
 import Actions from "./Actions";
 import getInitialState from "./State";
 import Reducer from "./Reducer";
@@ -49,7 +55,6 @@ export default class DefaultRenderer extends Component {
 
         let applyAnimation = selected.applyAnimation || navigationState.applyAnimation;
         let style = selected.style || navigationState.style;
-        let direction = selected.direction || navigationState.direction || "horizontal";
 
         let optionals = {};
         if (applyAnimation) {
@@ -59,7 +64,11 @@ export default class DefaultRenderer extends Component {
             if (duration === null || duration === undefined) duration = navigationState.duration;
             if (duration !== null && duration !== undefined) {
                 optionals.applyAnimation = function (pos, navState) {
-                    Animated.timing(pos, {toValue: navState.index, duration}).start();
+                    if (duration === 0) {
+                        pos.setValue(navState.index);
+                    } else {
+                        Animated.timing(pos, {toValue: navState.index, duration}).start();
+                    }
                 };
             }
         }
@@ -69,7 +78,6 @@ export default class DefaultRenderer extends Component {
                 navigationState={navigationState}
                 style={[styles.animatedView, style]}
                 renderOverlay={this._renderHeader}
-                direction={direction}
                 renderScene={this._renderCard}
                 {...optionals}
             />
@@ -84,13 +92,22 @@ export default class DefaultRenderer extends Component {
     }
 
     _renderCard(/*NavigationSceneRendererProps*/ props) {
+        const isVertical = props.scene.navigationState.direction === "vertical";
+
+        const animationStyle = props.scene.navigationState.animationStyle || (isVertical ?
+          NavigationCardStackStyleInterpolator.forVertical(props) :
+          NavigationCardStackStyleInterpolator.forHorizontal(props));
+
+        const panHandlers = props.scene.navigationState.panHandlers || (isVertical ?
+          NavigationCardStackPanResponder.forVertical(props) :
+          NavigationCardStackPanResponder.forHorizontal(props));
+
         return (
             <NavigationCard
                 {...props}
-                style={props.scene.navigationState.style}
+                style={[animationStyle, props.scene.navigationState.style]}
                 key={"card_" + props.scene.navigationState.key}
-                direction={props.scene.navigationState.direction || "horizontal"}
-                panHandlers={props.scene.navigationState.panHandlers }
+                panHandlers={panHandlers}
                 renderScene={this._renderScene}
             />
         );