For types, I'd recommend starting with npx types-react-codemod preset-19 ~/path-to-framer-motion-typescript-files. DefinitelyTyped/DefinitelyTyped#69022 has the full changelog.

@eps1lon I did try that but it didn't make any changes. Luckily I think I'm making headway with the types now.

@eps1lon I did try that but it didn't make any changes.

I just tried it in a fresh clone and it made changes to 25 files:

$ npx types-react-codemod@latest preset-19 .
Processing 779 files... 
Spawning 10 workers...
Results: 
0 errors
753 unmodified
1 skipped
25 ok
Time elapsed: 6.403seconds 

@eps1lon I did try that but it didn't make any changes.

I just tried it in a fresh clone and it made changes to 25 files:

$ npx types-react-codemod@latest preset-19 .
Processing 779 files... 
Spawning 10 workers...
Results: 
0 errors
753 unmodified
1 skipped
25 ok
Time elapsed: 6.403seconds 

Ah interesting, I must have done it wrong. I’ll give it another shot, thanks.

So hype for this.

Thanks for pushing on this. I'm very happy to report that framer-motion@12.0.0-alpha.0 is working well in my project running the latest NextJS canary and the latest react-19 RC.

Hi @mattgperry , just curious, does:

• Merge in Upgrade React Three Fiber 9 #2699 and restore 3d tests to CI

mean that you've already made significant progress on Framer Motion 3d compatibility with React 19?

I ask because I remember seeing the following warning in the docs, so it was a pleasant surprise.

Warning: Framer Motion 3D is only compatible with React 18, with no timeline for React 19 compatibility.

@steve-marmalade Yeah I think 3D should be working now but that will rely on the deps defined in the package.json. Due to its low usage if it takes too much time to upgrade it could be that we have to leave it for a while but luckily doesn't seem to be the case for now.

Thanks for pushing on this. I'm very happy to report that framer-motion@12.0.0-alpha.0 is working well in my project running the latest NextJS canary and the latest react-19 RC.

@steve-marmalade I'm also the latest NextJS canary (15.0.0-rc.0) but have some TypeScript problems. Did you change anything else after switching to framer-motion@12.0.0-alpha.0? The API did not change, right? My animation works but TypeScript complains with:

JSX element type 'motion.div' does not have any construct or call signatures.

and

'motion.div' cannot be used as a JSX component.
  Its type 'ForwardRefComponent<HTMLElementType, HTMLMotionProps<HTMLElementType>> | undefined' is not a valid JSX element type.
    Type 'undefined' is not assignable to type 'ElementType'.

I basically just use a very basic <motion.div ...

Getting a weird bug where the opacity isn't transitioning when I refresh the page (but fixes itself if I hard refresh shift-refresh). Using NextJS. Not sure how to solve for it because this issue was introduced in upgrading the packages below. I am using framer motion in my template for the route, also using the /src directory with a master layout.js that doesn't use any framer motion in it.

"next": "^15.0.0-rc.0",
"react": "^19.0.0-rc-df5f2736-20240712",
"react-dom": "^19.0.0-rc-df5f2736-20240712",
"framer-motion": "^12.0.0-alpha.0",

// src\app\template.js
'use client'
import { motion } from 'framer-motion'

const variants = {
  hidden: { opacity: 0, x: 0, y: 0 },
  enter: { opacity: 1, x: 0, y: 0 },
}

export default function Template({ children }) {
  return (
    <motion.main
      variants={variants}
      initial="hidden"
      exit="hidden"
      animate="enter"
      transition={{ type: 'linear', duration: 0.25 }}
      key="LandingPage"
    >
      {children}
    </motion.main>
  )
}

Getting a weird bug where the opacity isn't transitioning when I refresh the page (but fixes itself if I hard refresh shift-refresh). Using NextJS. Not sure how to solve for it because this issue was introduced in upgrading the packages below. I am using framer motion in my template for the route, also using the /src directory with a master layout.js that doesn't use any framer motion in it.

@Apezdr I'm getting the same behavior. This PR that might address the issue was just merged (more info here). It will hopefully be fixed once these changes are merged in the v12 alpha version.

Any chance we can get a alpha-1 backporting fixes since alpha-0 release?

@tyteen4a03 You can upgrade to 12.0.0-alpha.1 now, this contains all the latest releases!

Btw I'm attempting to upgrade to RC1 now. Not the smoothest process 😅 but hopefully new alpha today or Tuesday.

Stil blocked by #2925

React 19 released! 😀

Can someone who’s using 12.0.0 check out 11.13.3 and let me know if that works just as well?

Can someone who’s using 12.0.0 check out 11.13.3 and let me know if that works just as well?

Can someone who’s using 12.0.0 check out 11.13.3 and let me know if that works just as well?

That's odd, HTMLAttributesWithoutMotionProps shouldn't exist any more, let me take a look

@faradaytrs @thomashexagon can you check node_modues/framer-motion/package.json and double check that you have 11.13.3 installed as those types don't exist in dist/index.d.ts here: https://www.npmjs.com/package/framer-motion?activeTab=code

Reproducing on 19 locally I don't get the className error but do get the onClick any error.

Reproducing on 19 locally I don't get the className error but do get the onClick any error.

so should i check or you figured it out?

@faradaytrs you I believe are running the correct version, now I’m curious about the className

@faradaytrs This should be fixed with 11.13.4

All: Please use ^11.13.4 going forward, closing this branch out.