Between page transitions? Old request?

#1

Hi,

I was searching for answers on this forum on the topic of having similar transition animations for switching pages, just like switching DP states. I have a proto needs to set up full screen modals that need to be individual pages so I can pass variables between modals and the main page. Right now, the modals will just pop up abruptly if I just “Open Link”. I would like to “soften” up the experience with fade or slide up. I noticed this has been an old topic dates back to 2018 or earlier. Any work around with this?

Thank you.

KB

#2

Some things you could try…

  • Hide everything on a “modal page” by default and show them with an animation option in the Page Loaded event.

    • Grouping all widgets or placing all in a dynamic panel (DP) can help with this.
    • Alternatively, create a rectangle widget to act as a “mask” with no border and same fill color as the page background. Make it as large as the screen size, place it in front of everything and then just hide via its Loaded event or Page Loaded. …Actually, I find it easier for RP editing if you place this masking widget in the back–so you can easily see and access all your functional widgets easily–then call a Show, then Wait, then Hide action.
    • Another alternative is to place all your page widgets in a DP, add a new state and style that state with a fill (or place a rectangle in it) and move this “mask state” to top (or change state to this state in the DP’s Loaded event…)
    • Another tip is you can set the size of the mask widget/DP to the same size as the browser window to ensure it is always “full screen”. Use the Window Resized event to set the size of the mask to [[Window.width]] and [[Window.Height]]. You may also want to move your content so it is centered or placed as needed relative to the window size.

  • Put your “modal pages” that need loading transitions into one Axure page, with each virtual page as a unique state in a DP. This should offer you the most control and fidelity of transition animations, but of course makes your page design more complex and potentially slower on initial load (but much faster to “load” the virtual pages.)

    • If the modals need to be used on different content pages, you could create a Master from this DP.

  • Add an Inline Frame widget on your content pages and load your modal page(s) in the Inline Frame. Keep the Inline Frame hidden (or at least not visible; could be behind another widget or in a “lower” state of a DP) until after it’s target page is loaded, then show it using an animation.

    • If there are actions or changes which need to be tracked from the modal page to a content page, you could either reload the content page or create a “listener function” on the content page to continuously look for changes to global variables whenever the modal (the Inline Frame widget) is visible.
    • To create a “listener function” make a DP with at least two states (the states can be empty.) Turn on the listener with "Set State of Panel MyPanel to Next, repeat every 500 ms, wrap. (This creates an endless loop in which the Panel State Changed event is fired every 500 ms; adjust the delay time as needed–less delay means more responsiveness but also more drain on system resources and possibly performance.) Then use the Panel State Changed event to test for global variable values in one or more conditional cases. For example, if user clicks an OK button in modal, it could set OnLoadVariable to “#OK” and if user clicks a Cancel button it could set OnLoadVariable to “#Cancel”. Within 500 ms, the listener DP of the parent content page would automatically fire, and a case of "If value of OnLoadVariable equals “#OK” would evaluate to true. That case can clear the value of OnLoadVariable and do whatever else needed. At that point, any other global variable values can also be referred (say if user had choice to click a checkbox, make selection or enter text in the modal and then click OK.) It is good practice to keep this listener DP active only when needed, so whenever the inline frame is shown, set the “listener” DP to “next, every N ms, wrap”, and in each conditional case in the Panel State Changed event could end with an action of “Set Panel State of This to stop repeating”. …Or, the Hidden event of the Inline Frame widget could take care of this in one statement.
#3

These are good workarounds, though time-intensive. I deeply hope this feature is added on and soon. The people I demo for are really “wowed” with those page transitions so much so that I have to work in another app to prototype even though I’m not impressed with the capabilities that the alternative app has. I’d love to just be able to use Axure. [Please save my sanity, Axure! :slight_smile:]

#4

Feature requests should be made by sending an email to support@axure.com

#5

I’ve been doing a way of pre-staging the transition in the out going page and link to the in coming static page. The problem is that this approach is not scalable. That’s what I’ve been doing as a workaround. A “workaround” is a UX pain point, right? I already sent support an email to request this feature. This feature should be very standard. I feel this is kinda big deal if Axure wants to beat Figma/Sketch or other “linking line” based prototyping tools. In those tools, between page transitions are easy as cake: link two pages up with a arrow line, specify the transition type on the right panel, done. Maybe that’s why Figma is getting so much traction these days among UX/UI people. Stuff like that is very simple. Not all designers like to brain twist with conditions, logics, expressions and variables.