diff --git a/declarativeimports/plasmacomponents/qml/PageStack.qml b/declarativeimports/plasmacomponents/qml/PageStack.qml
index c0ae79cea..6be6e31be 100644
--- a/declarativeimports/plasmacomponents/qml/PageStack.qml
+++ b/declarativeimports/plasmacomponents/qml/PageStack.qml
@@ -239,6 +239,10 @@ Item {
             width: parent ? parent.width : 0
             height: parent ? parent.height : 0
 
+            // The actual parent of page: page will anchor to that
+            // in this case is container itself, not the case for PageRow
+            property Item pageParent: container
+
             // The states correspond to the different possible positions of the container.
             state: "Hidden"
 
diff --git a/declarativeimports/plasmaextracomponents/qml/PageRow.qml b/declarativeimports/plasmaextracomponents/qml/PageRow.qml
index b3daf026d..65bc1960d 100644
--- a/declarativeimports/plasmaextracomponents/qml/PageRow.qml
+++ b/declarativeimports/plasmaextracomponents/qml/PageRow.qml
@@ -198,8 +198,9 @@ Item {
         boundsBehavior: Flickable.StopAtBounds
         contentWidth: mainItem.width
         contentHeight: height
-        Item {
+        Row {
             id: mainItem
+            spacing: -100
             width: columnWidth*depth
             height: parent.height
             Behavior on width {
@@ -218,20 +219,6 @@ Item {
         orientation: Qt.Horizontal
     }
 
-    Component {
-        id: animationClipComponent
-        Item {
-            clip: container.pageDepth == root.depth || container.pageDepth == root.depth + 1
-            anchors {
-                top: parent.top
-                bottom: parent.bottom
-            }
-            width: columnWidth + 100
-            x: (container.pageDepth-1)*container.width
-            property Item container
-        }
-    }
-
     // Component for page containers.
     Component {
         id: containerComponent
@@ -239,19 +226,15 @@ Item {
         Item {
             id: container
 
-            width: columnWidth
+            width: columnWidth + 100
             height: parent ? parent.height : 0
-            x: 0//(pageDepth-1)*width
+            x: 0
 
+            // The actual parent of page: page will anchor to that
+            property Item pageParent: actualContainer
 
             property int pageDepth: 0
-            Component.onCompleted: {
-                pageDepth = Engine.getDepth() + 1
-                container.z = -Engine.getDepth()
-                var clipItem = animationClipComponent.createObject(mainItem)
-                clipItem.container = container
-                container.parent = clipItem
-            }
+
             // The states correspond to the different possible positions of the container.
             state: "Hidden"
 
@@ -284,8 +267,17 @@ Item {
                     transitionEnded();
             }
 
-            transform: Translate {
-                id: translate
+            clip: true
+            Item {
+                id: actualContainer
+
+                anchors {
+                    top: parent.top
+                    bottom: parent.bottom
+                    right: parent.right
+                    rightMargin: 100
+                }
+                width: columnWidth
             }
 
             Image {
@@ -294,9 +286,9 @@ Item {
                 fillMode: Image.TileVertically
                 opacity: container.pageDepth == root.depth ? 1 : 0.7
                 anchors {
-                    left: parent.right
-                    top: parent.top
-                    bottom: parent.bottom
+                    left: actualContainer.right
+                    top: actualContainer.top
+                    bottom: actualContainer.bottom
                 }
                 Behavior on opacity {
                     NumberAnimation {
@@ -401,24 +393,25 @@ Item {
                 State {
                     name: ""
                     PropertyChanges { target: container; visible: true; opacity: 1 }
-                    PropertyChanges { target: translate; x: 0}
+                    PropertyChanges { target: container; width: columnWidth+100}
                 },
                 // Start state for pop entry, end state for push exit.
                 State {
                     name: "Left"
                     PropertyChanges { target: container; opacity: 0 }
-                    PropertyChanges { target: translate; x: -width}
+                    PropertyChanges { target: container; width: 100}
                 },
                 // Start state for push entry, end state for pop exit.
                 State {
                     name: "Right"
                     PropertyChanges { target: container; opacity: 0 }
-                    PropertyChanges { target: translate; x: -width}
+                    PropertyChanges { target: container; width: 100}
                 },
                 // Inactive state.
                 State {
                     name: "Hidden"
                     PropertyChanges { target: container; visible: false }
+                    PropertyChanges { target: container; width: columnWidth+100}
                 }
             ]
 
@@ -429,7 +422,7 @@ Item {
                     SequentialAnimation {
                         ScriptAction { script: transitionStarted() }
                         ParallelAnimation {
-                            PropertyAnimation { properties: "x"; easing.type: Easing.InQuad; duration: transitionDuration }
+                            PropertyAnimation { properties: "width"; easing.type: Easing.InQuad; duration: transitionDuration }
                             PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: transitionDuration }
                         }
                         ScriptAction { script: transitionEnded() }
@@ -441,7 +434,7 @@ Item {
                     SequentialAnimation {
                         ScriptAction { script: transitionStarted() }
                         ParallelAnimation {
-                            PropertyAnimation { properties: "x"; easing.type: Easing.OutQuad; duration: transitionDuration }
+                            PropertyAnimation { properties: "width"; easing.type: Easing.OutQuad; duration: transitionDuration }
                             PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: transitionDuration }
                         }
                         ScriptAction { script: transitionEnded() }
@@ -453,7 +446,7 @@ Item {
                     SequentialAnimation {
                         ScriptAction { script: transitionStarted() }
                         ParallelAnimation {
-                            PropertyAnimation { properties: "x"; easing.type: Easing.InQuad; duration: transitionDuration }
+                            PropertyAnimation { properties: "width"; easing.type: Easing.InQuad; duration: transitionDuration }
                             PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: transitionDuration }
                         }
                         // Workaround for transition animation bug causing ghost view with page pop transition animation
@@ -468,7 +461,7 @@ Item {
                     SequentialAnimation {
                         ScriptAction { script: transitionStarted() }
                         ParallelAnimation {
-                            PropertyAnimation { properties: "x"; easing.type: Easing.OutQuad; duration: transitionDuration }
+                            PropertyAnimation { properties: "width"; easing.type: Easing.OutQuad; duration: transitionDuration }
                             PropertyAnimation { properties: "opacity"; easing.type: Easing.InQuad; duration: transitionDuration }
                         }
                         ScriptAction { script: transitionEnded() }
diff --git a/declarativeimports/plasmaextracomponents/qml/private/PageRow.js b/declarativeimports/plasmaextracomponents/qml/private/PageRow.js
index 75ccb52f4..d3c8eae0a 100644
--- a/declarativeimports/plasmaextracomponents/qml/private/PageRow.js
+++ b/declarativeimports/plasmaextracomponents/qml/private/PageRow.js
@@ -139,7 +139,7 @@ function initPage(page, properties) {
             throw new Error("Error while loading page: " + pageComp.errorString());
         } else {
             // instantiate page from component
-            page = pageComp.createObject(container, properties || {});
+            page = pageComp.createObject(container.pageParent, properties || {});
         }
     } else {
         // copy properties to the page
@@ -158,15 +158,15 @@ function initPage(page, properties) {
     }
 
     // the page has to be reparented if
-    if (page.parent != container) {
-        page.parent = container;
+    if (page.parent != container.pageParent) {
+        page.parent = container.pageParent;
     }
 
     if (page.pageStack !== undefined) {
         page.pageStack = root;
     }
 
-    page.anchors.fill = container
+    page.anchors.fill = container.pageParent
 
     return container;
 }