Setting the transition direction animation


#1

Is there an easy way to set a transition direction on a link?
e.g. mostly links have new content coming in on the right, and back button the content leaves on the right. This happens automatically, which is great.

But occasionally, e.g. a “home” link, I want to force that the content leaves on the right, and the home content comes in from the left (i.e. like the back link direction). But because its a link, the content tends to arrive from the right, the opposite of what I want, when going up a navigation tree.

Presumably there must be a means on the link to set the transition direction?

Sorry, new to Angular and new to Ionic so this may be really obvious.

Thanks!


Control Transition Direction
Set different animation/transition for each page
Change animation on button click or location.url()
#2

Hey @alexb,

This one I’ll pass on to @adam who built the nav system. I believe you could just add the reverse class to the nav-view when you you want to change the direction manually. Maybe using some DOM modifications. Perhaps there is a way for us to change this more easily?


#3

The reverse class doesn’t seem to do the trick. I’m going to investigate a bit more. I’ll post back here if I find anything.


#4

@adam I would also like to know the answer to this :smiley:


#5

This is a big one for me. The animation direction will often go left to right even when travelling back through the navigation stack.
Any work arounds to this?


#6

I wound up changing the UX flow of my app so that it didn’t really make a big difference anymore. What I had found out is that navigation animations are grouped by tab groups as each tab group has its own “history”. A navigation to the page you were just on triggers a backwards step in that history and a backwards animation. Interestingly, if you load a child page directly, the back button will trigger a forward animation.

More to the point of the thread, left/right page animations are closely tied to the tab bar directive in Ionic. If you want to animate between pages in a manner unlike its default behavior, you’ll likely have to roll your own. There’s some reusable bits to Ionic that you can use, but it would be a new thing (directive/service).

These are my findings, but I’m still pretty new to Ionic, so take it with a grain of salt.


#7

The main issue is if you skip a navigation step the automatic animation based on history is wrong.
Eg. If you have an A -> B -> C navigation stack and you link directly to B from somewhere (skipping A), then going B -> A triggers a forward animation. which is very disorienting for the user.


#8

@adam/@max: Any updates on this? In my app I sometimes have to jump back two or more steps in history, and afterwards the view transitions go in the wrong direction. Is there any way to reset/clear the history once the user gets back to the home screen in the app?

Cheers!


#9

For cleaning history, see if any of these topics help:



#10

@jorgtron, it’s something we are working on right now. No answer just yet unfortunately, but it’s a higher priority.

Sorry I can’t be more concrete, we are still investigating why it’s happening sometimes and not other times.


#11

@jorgtron You might also want to look at this :

and

Your links aren’t getting the “back” animation you expect because they are links. Links mean go forward. So, a link can’t understand your intent to go backward.

Look at the code for the last page in the example. It uses the history to actually go back and provides the correct animation.


#12

Thanks! I’ll check those out :smiley:


#13

Thanks for the advice. I have a similar problem in which the step back is a logical one and not necessarily in the view history. I have a list and a detail view of a list element. Now I implemented in the detail view two fast navigation buttons (left and right) to change to the detail view of the previous list element respectively of the next list element without having to return to the list view. And the back button of the detail view always returns to the list view, not to the detail view last shown. I got all this working but not the back animaton for going to the previous list element. How can I do this?


#14

You mind starting a new forum post and including a CodePen sample of what you’re trying to accomplish? Or at least a GIF showing what’s happening.


#15

I also have this same problem.

A simplified journey use case:

#/app/chapter/1/

#/app/chapter/1/question/1

#/app/chapter/1/question/2

#/app/chapter/2/

then if the user wants to go back a page, I navigate them to:

#/app/chapter/1/question/2

However this transitions from left to right rather than right to left.

Any help would be appreciated. It’s crazy how jarring it looks when it is the wrong direction.


#16

Hey @elliot, did you end up finding a way to set a direction for the animation to a specific state?

@mhartington or @Calendee maybe?


#17

Negative, currently I’m carrying on with other development and hoping something comes from this thread in the mean time!

For the most part the transitions are fine apart from my bespoke back button where it tends to guess incorrectly that I’m going forward rather than back. In this case wherever I have this button I’d like to force a particular direction (such as right to left)


#18

@coen_warmer, sorry for not getting back to you right away, seems like you’ve been active about this on github :smile:


#19

Yup @mhartington, glad to know it’s being worked on. Excited about all this new stuff that’s coming!


#20

Just remember…