Framer motion Next js Pages Router Using Split-type and LayoutID for loader

[adamjw3]

Link to working example of the issue i'm facing example

So i have a loader that runs an animation and then on complete sets a state so i show the page content.

In the loader.js i have an element layoutID="name" and in the page i have a corresponding element layoutID="name" which is inside a splitText component

When it loads its meant to animate into the pages element position, similar to what this example does with the large image https://pageloader-3cf2b.web.app/

I've also tried putting the element outside the splitText component layoutID="name2", but still some issues.

Any help would be great