Page transitions options


#1

Is it possible to design an app in Axure with easing left/right sliding type of page transitions?

For example, I have 4 links on the banner that links to 4 pages pinned at the top.

When I click on a link, each page slides to the left or right.

I’m tempted to use a slider like this, then invert it, and replace the dots with text as my links. But that doesn’t seem like a proper approach.

I also have lines below each active link, and hoping the line moves horizontally along where I click the link, which looks a bit like this (the red line):

I’m guessing this is fairly standard mobile UI for apps. But couldn’t find a tutorial.
Anyone know of a tutorial for me to achieve these?


#2

Hi adintee,

The prototype pages themselves don’t have animated transitions but if you want to simulate changing pages with an animation then I would recommend putting the content of your “pages” into different states of a dynamic panel. You can then set up an interaction that allows you to switch panel states with an animation.

The tutorial linked below is specifically for creating an image carousel, but steps 1-4 will help to give you an idea of how to animate your state changes:

https://www.axure.com/support/training/rotating-carousel-banner-tutorial

https://www.axure.com/support/reference/dynamic-panel-widgets

Hopefully this helps!


#3

Yeah that’s what I ended up doing. I did a search on the forums and it seems axure isn’t able to do what i originally wanted. It’d be nice to have though. Thank you.


#4

Gotcha. I’ll go ahead and put in a feature request for animated page transitions with the product team so that we can take a look. :slight_smile:


#5

Has this feature been incorporated? Every time I design pages in Axure the transitions between the different pages “flickr” like a glitch or a flash light. Transitions should be smoother… In my case, I cannot create everything inside a DP because the prototype is too complex for that, what are my alternatives?


#6

Hi nicolebtesh!

Hmm, I wasn’t able to reproduce a flicker when switching pages on our iPhone and Android device. Would you be able to post an example file here for me to test? Please also let me know the mobile device you are using, the OS version, and whether you see this behavior in a specific browser, the Axure Share mobile app, or both.

And this feature hasn’t been incorporated yet, but I’ll go ahead and file this with our respective teams to see if we could add page transition options in a future release . Hopefully this helps a bit!


#7

Second this feature request please. Its a major blocker to making my entire shop an Axure shop.


#8

Hi,
this is still a needed feature. Axure is great to build website dummys. In many way axure is much better for builidng prototyps then other solutions. But if you want to keep the leadposition, it should also be possible to simulate app behaviours which includes page transitions. All others concentrate on Apps and miss out website prototyps.
Dynamic panels are nice but as my previous speaker mentioned, not if the prototype is to complex or just to big. Imagine 200 pages all within one dynamic panel. It will not only be to complex but also a performance problem.

Kind regards