White flash when switching between flexible layouts

[Ollie]

Hi there,

When viewing my site either locally or when uploaded and online there is a white flash when the browser window is resized and it switches between flexible layouts.

I have only 1 preloaded image across all layouts which is 900KB, I did remove this from being preloaded as a test which made no difference, so I don’t think it is related to loading times.

Any suggestions on how to remove this white flashing would be great.

Thanks.

[jonathan (Jonathan Deutsch)]

The white flash is typically caused by the browser not being able to render the new layout fast enough. This could be caused by a wide variety of things such as a large number of elements, a lot of images, large images that need to be scaled, javascript, etc.

Preloading can help, but note that it is more pre-[down]loading, and the browser typically still needs to decode and render the image. Thus if is large in pixel dimensions can lead to the page being held up.

A simple test would be to try unchecking “Use WebKit graphics acceleration” and/or checking “Position with CSS left/top” in the Document Inspector. This changes the rendering characteristics and might help.

Otherwise without seeing the .hype document it’d be hard to provide any other advice!

[Ollie]

Thanks for your reply @jonathan.

I since found what I believe may be the problem. When changing between flexible layouts the Main Timeline is replayed, which in my case starts very briefly as a blank white screen.

I put a black box behind the various animating elements covering the blank screen to test, which resulted in the white flash no longer existing when switching between layouts.

So my question would now be is there a way to stop the timeline replaying when switching between flexible layouts?

Thanks again for your help on this.

[DBear]

@Ollie

between flexible layouts?

Between responsive layouts

You can run this timeline in a persistent symbol which will hold its position when transferring between layouts as P Symbols run outside the layout/scene environment.

[Ollie]

Ah yes… “Responsive” thats what I mean!

How do I go about making the Main Timeline into a persistent symbol, if thats what your suggesting.

Thanks

[jonathan (Jonathan Deutsch)]

I guess given your diagnosis, is this any different than this previous thread?

Switching between flexible layouts keep same place in timeline

I have got it to work just great, however and I don’t know how possible my next question will be as I understand with persistent Symbol’s they cannot be different from one another. But is there anyway to have the landscape version images landscape and the portrait images portrait. So changing within the symbol the image depending on the flexible layout orientation. Thanks again.

There's some code there that will keep the timeline position from different layouts, which it looks like you marked as a solution!

@Ollie

How do I go about making the Main Timeline into a persistent symbol, if thats what your suggesting.

It depends on your document, but the easiest method may be selecting the elements in question, and then choosing Symbol > New Persistent Symbol from Selection. However the timeline sync method from above might be easier still and better preserve different layout choices.

[Ollie]

I hadn’t thought of using that same code for this.

I will look into using this as it solved the answer before perfectly.

Thanks @jonathan