framer-motion layoutTransition does work in React, but not in NextJS

Question

I am trying to wrap my head around framer-motion, a really nice animation library which I am trying to use in combination with NextJS. I followed a CSS tricks youtube video, which explained layoutTransition using this sandbox: https://codesandbox.io/s/framer-motion-css-tricks-template-3-07wkh?fontsize=14&module=/src/Image.tsx&file=/src/Image.tsx:0-783

Eager to try it out I copied into my NextJs project, but I couldn't get it to work. I stripped away everything to make it even cleaner and ended up with these sandboxes: One is React, the other is NExtJS. To me they are identical, but the zooming of the image using layoutTransition doesn't seem to work in my NextJS sandbox, why?

https://codesandbox.io/s/framer-motion-image-zoom-forked-774up https://codesandbox.io/s/currying-haze-wii0m

indyanin · Answer 1 · 2020-08-22T13:41:30.283

2

I had the very same problem which has taken me well to much time to fix. So the reason it doesn't work for your next app is that your framer-motion version is above 2.0. Downgrade it to the latest v1 which is 1.11.1 and you should be fine. I don't have any idea why layoutTransitions stopped working since v2, did not found any info about this problem.

I find framer-motion wonderful but it lacks good documentation and community does not to seem to be substantial yet

edited Aug 22 '20 at 13:41

answered Aug 22 '20 at 12:31

indyanin

812
1
8
10

btw it seems that layoutTransition has been deprecated. Use layout={true} instead. I've tested it and works like a charm on the newest version. – indyanin Aug 22 '20 at 16:10
Great! thanks, `layout` works, then I user `transition={...}` for the transition instead of `layoutTransition={...}` – Ignism Aug 23 '20 at 13:38
I'm glad I could help! – indyanin Oct 17 '20 at 13:05
@indyanin +1 `layout={true}` works – nart Nov 14 '22 at 14:54

framer-motion layoutTransition does work in React, but not in NextJS

1 Answers1