1

I think I'm loosing my mind.

I created a new Nextjs project, installed Framer-Motion via NPM, ran the project in dev mode. Everything compiles and the page loads, but as soon as I add motion to an element, it vanishes with no errors.

I'm getting this both on PC and Mac. I even deleted my node modules and package.lock files and rolled back to a version of Next.js & framer-motion that I've had working in the past but it didn't do the trick. Just for kicks I created a new react app with framer-motion and it worked without issue there.

import {motion} from 'framer-motion';

export default function Home() {
  return (
    <>
      <motion.div
        className="test"
        animate={{ scale: 1.5 }}
      />
      <style jsx>{`
        .test {
          width: 100px;
          height: 100px;
          background-color: red;
        }
      `}</style>
    </>
  )
}
juliomalves
  • 6,951
  • 6
  • 22
  • 30
Kevin Merinsky
  • 15
  • 3

1 Answers1

0

That's because your styled-jsx styles are not being applied to the framer-motion element.

To style a third-party component like the motion.div element you'll need to use the resolve tag from styled-jsx/css.

import { motion } from 'framer-motion';
import css from 'styled-jsx/css';

const { className, styles } = css.resolve`
  div {
    width: 100px;
    height: 100px;
    background: red;
  }
`;

export default function Home() {
    return (
        <>
            <motion.div
                className={className}
                animate={{ scale: 1.5 }}
            />
            {styles}
        </>
    )
}
juliomalves
  • 6,951
  • 6
  • 22
  • 30
  • 1
    Thanks Julio! That worked, though I have no idea why it worked previously then, but oh well! It might just be worth setting up styled-components for my projects in the future. – Kevin Merinsky Mar 22 '21 at 17:44
  • ** EDIT ** I just realized on my last project I used Tailwind, so that explains it. THANKS AGAIN! – Kevin Merinsky Mar 22 '21 at 17:50