Persistent symbol jumping when cross fade scene transition applied (bug)

Hi,

In the attached hype project, my Nav jumps and resizes during page transition, how can I keep the Nav static in one place throughout my webpage?

test2019_0.3_nav_example.zip (30.4 KB)

Not sure what’s going on there…!

I copied all elements to a new doc and it now works as expected.

test2019_0.3_nav_example.2hype.hype.zip (29.6 KB)

Thanks Mark, I think it was the persistent symbol that caused the animation glitch in my document, the nav still jumps around In your document - this is probably something to do with scaling

Hi Lee!

I believe your issues here are:

1) A scrollbar, which is not present in “Scene 1”, is added to the right side of the page when You transition to “Scene 2” so there is a jump. The height of “Scene 1” is 870 pixels. “Scene 2” is 1990 pixels. Match either one to the other (or close enough to add/remove the scrollbar) and there will not be a jump except that…

2) Your Persistent Symbol in “Scene 1” is placed closer to the left side of the screen (by 9 pixels) than in “Scene 2”; and in “Scene 1” is six pixels closer to the top of the screen than in “Scene 2”.


The attached Hype document has the height of “Scene 1” increased (so both Scenes have vertical scroll bars) and I’ve corrected the slight offset from one scene to the other.

test2019_0.3_nav_example_JHSv1.hype.hype.zip (24.3 KB)

1 Like

I assume you worked from the version I posted and not the original. ?

I do not think this is an issue.. If you make the size of scene 1 in you version smaller it still works ok.

The original post by Lee was doing this.

--
The new version I made was doing this.

Just the offset was left which I did not fix fully...

So not sure what was going on with the original. But even if you matched the height in both scenes you still get it.

Thanks for this, thats exactly how I imagined it work but id like to retain the scaling feature - the website scales well across all device sizes, my only issue with scaling is here: Scaling a website across devices

It would be great if I could get the nav to stay consistent throughout the pages, even though they scale differently and are different heights.

Thats what I am pointing out...

test2019_0.3_nav_example_v2hype.hype.zip (29.6 KB)

Thanks for the work around Mark but as above, I wanted to retain the scale feature - It means I won't have to redesign the page 3 or more times across devices. In your hype file, the content no longer scales and on resizing the browser window, the user has to scroll around the page

Ahh sorry, my bad, i missed the bit about scaling...

Sorry, this is a known issue in Hype with persistent symbols inside of non-persistent groups using flexible layout.

You should be able to achieve the result you want if it is placed outside of the group in both scenes.

1 Like

thanks, for anyone reading here’s the thread: Scaling a website across devices

at time of writing there is no workaround