General advice when using saos?

[socketopp]

Hey,

What's the general advice for document layout when using saos? How to work with it when using a Layout file with headers and footers that change the height of the page.

Layout file

{# if condtions, don't show header on all pages etc}
<Header/>
{/if}
  <div class="relative w-full z-[100]">
      <slot/> // The main page is rendered here 
   </div>
 {# if condtions, don't show Footer on all pages etc}
<Footer/>
{/if}

Main page I have multiple Saos elements rendered but the height of the page seems to be jumpy?

<Saos once={true} animation={'from-left 1.5s cubic-bezier(0.35, 0.5, 0.65, 0.95) both'}>
  <section class="flex items-center justify-center h-auto">
    <Features />
  </section>
</Saos>

<style>
	@keyframes -global-from-left {
		0% {
			filter: blur(2px);
			transform: rotateX(5deg) translateX(-10vw) skewX(-5deg);
			opacity: 0;
		}
		100% {
			filter: blur(0);
			transform: rotateX(0deg) translateX(0) skewX(0deg);
			opacity: 1;
		}
	}
</style>

For me, it's quite buggy and glitchy but I think that's my fault mainly because of how things are rendered.