Having Trouble With Layout Animations

[eldonwilliams]

I'm trying to use layout animations, but whenever I mark any component as layout or give it a layoutId= all sibling motion components fail to animate smoothly, they just jump keyframes. Components in AnimatePresence will have that effect until they're unmounted and then everything works again. I'm stuck here.

// pages/index.tsx
{profileVisible && <motion.div
  // className='flex flex-col items-center justify-center'
  // style={{ opacity: 1, width: 128, height: 128, }}
  layoutScroll
  layoutId='profile'
  // transition={{ type: "spring", stiffness: 500, damping: 30, }}
>
  <Profile loading="eager" size="128" />
</motion.div>}

// components/Navbar.tsx
<AnimatePresence>
    {!profileVisible && <motion.div
        layout
        layoutId='profile'
        transition={{
            type: "spring", stiffness: 500,
            damping: 30,
        }}
    >
        <Profile loading="eager" className="opacity-100 w-10 h-10" />
    </motion.div>}
</AnimatePresence>

---

Things I've Tried

• Wrapping Navbar.tsx in LayoutGroup (no props)
• Giving other components layout as well, layout animations run smoothly but animations don't

---

I am using Next.js 13 and whatever the latest Framer Motion is

[eldonwilliams]

Update: I'm one step closer to getting it to work. But, now my navbar layout animation stutters when coming back in. I believe this is better stated as layout animations are not working when the navbar's Profile element exits only but plays correctly on entry.

My change is extremely hacky as well: I added an infinitely rotating div to the index page.

My hypothesis is that some kind of thread is dropped when no motion components are in both parent components and that 'thread' handles the render updates. I very well could be wrong.

[eldonwilliams]

Also, for anyone who wants the full source code and to test the project themself https://github.com/eldonwilliams/eldon-zone

Very much appreciate any help on this!

[eldonwilliams]

Update 2: Alright, seems that unwrapping the entire app from a LayoutGroup caused the layout animations to be weird. Still, the moving div fix is not satisfactory IMO. I'm going to see if there's something else I can do to fix this/I'm doing something very wrong, or if this is actually a bug. (Would be cool if I get to PR and fix it too 😄)

[hajirasyafi]

I have same case with you, if you want to clone my repo for example :
https://github.com/hajirasyafi/weddingtemplate0
this work for me

[eldonwilliams]

I have same case with you, if you want to clone my repo for example :
https://github.com/hajirasyafi/weddingtemplate0
this work for me

I'll take a look when I get home, but its completely broken on Mobile which is probably a sign I'm doing something seriously wrong. The animation is overly complex and I might just simplify it. Somewhat disappointing though...

Thank you!

[hajirasyafi]

Okay, mention me if still not work

[eldonwilliams]

Okay, mention me if still not work

Again, thank you for your response, I've just decided to remove the animations completely. They were pretty bad for accessibility and very mobile incompatible. I hope this isn't symptomatic of some bigger incompatibility with next.js as I don't know why framer would be incompatible – then again, there's a lot I don't know, and still need to learn!