Page Transition Background Color

page-and-widget-styles
#1

Hi. I was wondering if it was possible to change the color of background when transitioning from one page to another. I’m trying to mock something up that will be used in a dark environment and even though the backgrounds for the pages themselves are dark, there is a flash of white that fills the window background when transitioning from one page to the next. Is this something that can be adjusting in Axure, or is this an artifact of the browser itself?

#2

You should be able to set the default page color in your browser, and/or set it to dark mode if it is supported.

For best control of page transitions in Axure, you can create each page content as a state in a dynamic panel, all on one real page. For example, if you have 3 pages, Page 1, Page 2, and Page 3, you can select everything on Page 1 and create a dynamic panel. maybe named “Pages”. Add two states, copy everything on Page 2 and paste into the second state of “Pages” dp, then same for Page 3. Then, instead of using Open Link use Set Panel State. Setting up things this way can make for a longer initial page load but very quick and controllable transitions between the page views.

Another approach is to use an Inline Frame widget to load the pages. When loading a page in an iframe, you’ll still get a white flash, but you can place a rectangle in front of it with whatever color you need–as a “blockout” or “mask” widget–and hide that with a fade or whatever after waiting for the page to load in the iframe. Basically, just keep your page structure as is, but add a page at the top with an inline frame the same size as your viewport (browser window) and a “mask” or “blockout” rectangle the same size and location. (It’s been awhile since I’ve done this, but my memory is that just hiding/showing the inline frame will show a white flash also.)

#3

I’m experiencing the same thing when testing my application in Axure Cloud. I have set a #000000 background for my pages but whenever I change page as I navigate through my app it flashes white which isn’t very nice. I was thinking of mocking a spinner to use as a transition but that won’t work.

I think this is a flaw actually. I can’t really demo my app live to customers without having to excuse the white flashing. Not sure if this could even be fixed… maybe some kind of workaround as mbc66 mentioned is the only way.