Is it possible to disable animation from specific element on the page

[AnatoliiCubex]

Hi! Thank you for this library—it has significantly improved transitions and saved me a lot of time. However, is it possible to specify which content might be static?

I have a sidebar on the left with three links, and all three pages contain an h1 tag with the page name and some content(by the way this is the vercel tutorial called Acme). I've added a "disabled" transition name to the sidebar div wrapper, so it no longer animates (which is fine). However, when I try to remove the animation from the h1 tag by adding style={{viewTransitionName: "disabled"}}, the animation gets disabled on whole page when transitioning from this page to another and still works when navigating to this page. Even though it only suppose to remove animation from h1

Is it possible to disable animation for specific elements on the page?

My layout (app/dashboard/layout.tsx):

export default function DashboardLayout({ children }: PropsWithChildren) {
  return (
    <div className='flex md:flex-row flex-col h-screen md:overflow-hidden'>
      <SideNav />
      <div className='flex-grow p-6 md:p-12 md:overflow-y-auto'>{children}</div>
    </div>
  );
}

Here’s the code for the sidebar (app/components/sidebar):

export default function SideNav() {
  return (
    <div style={{ viewTransitionName: "disabled" }}>
      {/* sidebar content */}
    </div>
  );
}

Example of the page (app/dashboard/(overview)/page.tsx):

export default async function Page() {
  return (
    <main>
      <h1
        style={{ viewTransitionName: "disabled" }}
        className={`${lusitana.className} mb-4 text-xl md:text-2xl`}
      >
        Dashboard
      </h1>
      {/* rest of the page content */}
    </main>
  );
}