# Ionic Framework page transition direction

**URL:** <https://forum.ionicframework.com/t/ionic-framework-page-transition-direction/14672>\
**Category:** ionic-v1\
**Created:** [December 24, 2014, 11:43am UTC](https://forum.ionicframework.com/t/ionic-framework-page-transition-direction/14672 "2014-12-24T11:43:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gusdeboer](https://avatars.discourse-cdn.com/v4/letter/g/8e7dd6/32.png) [@gusdeboer](https://forum.ionicframework.com/u/gusdeboer)\
**Post date:** [December 24, 2014, 11:43am UTC](https://forum.ionicframework.com/t/ionic-framework-page-transition-direction/14672/1 "2014-12-24T11:43:56Z")

</div>

I’m using Ionic Framework with Angularjs for my app, but I’m getting stuck on the page transitions.

The app is for iOS and the back button gives the direction as forward. Is it possible to set the direction with javascript / Angularjs?

Here is part of my page config.

```
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider

    .state('app', {
        url: "/app",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
    })
    .state('app.dashboard', {
        url: "/dashboard",
        views: {
            'menuContent': {
                templateUrl: "templates/dashboard/dashboard.html"
            }
        }
    })
    .state('app.DLRlogin', {
        url: "/DLR_login",
        views: {
            'menuContent': {
                templateUrl: "templates/dlr/dlr_login.html"
            }
        }
    })
    .state('app.search_phone', {
        url: "/search_phone",
        views: {
            'menuContent': {
                templateUrl: "templates/search_phone/search_phone.html"
            }
        }
    })

```

When the user goes from Dashboard to a page the transition goed forward, which is good, but the back button also gives a forward transition.

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [December 24, 2014, 3:00pm UTC](https://forum.ionicframework.com/t/ionic-framework-page-transition-direction/14672/2 "2014-12-24T15:00:04Z")

</div>

Which version of Ionic are you using? In 1.0.0-beta.14 you can use [navDirection](http://ionicframework.com/docs/api/directive/navDirection/) on a link to force the transition to appear like you are going backwards. However, if you are using the ion-nav-back-button it should automatically be forcing this animation. Do you have a custom back button? A codepen would be helpful. 😄

---

<div class="post-metadata">

**Author:** ![gusdeboer](https://avatars.discourse-cdn.com/v4/letter/g/8e7dd6/32.png) [@gusdeboer](https://forum.ionicframework.com/u/gusdeboer)\
**Post date:** [December 29, 2014, 9:15am UTC](https://forum.ionicframework.com/t/ionic-framework-page-transition-direction/14672/3 "2014-12-29T09:15:11Z")

</div>

Due to the projects importancy I can’t show a codepen.

Is there a way I can accomplish this with javascript?

---

<div class="post-metadata">

**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\
**Post date:** [December 30, 2014, 2:38pm UTC](https://forum.ionicframework.com/t/ionic-framework-page-transition-direction/14672/4 "2014-12-30T14:38:15Z")

</div>

You can call $ionicHistory.goBack() to navigate to the last view in the JS, but I don’t know of a way to force a back transition when you are not actually going to a back view (in JS).

---

<div class="post-metadata">

**Author:** ![andryanmiller](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/andryanmiller/32/72074_2.png) [@andryanmiller](https://forum.ionicframework.com/u/andryanmiller)\
**Post date:** [January 31, 2015, 12:25am UTC](https://forum.ionicframework.com/t/ionic-framework-page-transition-direction/14672/5 "2015-01-31T00:25:22Z")

</div>

Just spent a while figuring this out - the solution can be found by looking in the code for the [nav-direction directive](https://github.com/driftyco/ionic/blob/4130c5a1c3db8a8061d18c7699621234a752568a/js/angular/directive/navDirection.js). In short:

`$ionicViewSwitcher.nextDirection('back')`

Sets the next view direction progmatically to back.