CODEWITHSUNDEEP
next.jsframer-motion
SirGhazian
SirGhazian

Reputation: 31

Framer Motion animations not working on first load but work after page refresh

I'm using Framer Motion with Next.js 15, and encountering an issue where animations don't work on initial npm run dev, but they start working correctly after refreshing the page. Is this related to server-side or client-side rendering?

preview

I've integrated Framer Motion for animations in my Next.js project, and noticed that on initial startup with npm run dev, animations do not play. However, after refreshing the page, animations work as expected. Could this issue be related to server-side rendering or client-side rendering? Any insights or suggestions on how to ensure animations work seamlessly from the first load would be greatly appreciated!

page.tsx

"use client";
import { motion } from "framer-motion";

export default function home() {
  return (
    <>
      <motion.h1
        initial={{ y: -100 }}
        animate={{ y: 150 }}
      >
        ANIMATION TEST
      </motion.h1>
    </>
  );
}

layout.tsx:

import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import "./globals.css";
import { FloatingNav } from "@/components/ui/floating-navbar";
import { navItems } from "@/data";

const poppins = Poppins({
  subsets: ["latin"],
  weight: [
    "100",
    "200",
    "300",
    "400",
    "500",
    "600",
    "700",
    "800",
    "900",
  ],
  variable: "--font-poppins",
});

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={poppins.className}>
        {children}
      </body>
    </html>
  );
}

I expected animations to start playing immediately upon initial page load during development (npm run dev). I've checked my setup and it seems correctly configured according to the Framer Motion documentation for Next.js integration.

Upvotes: 2

Views: 377

Answers (1)

miguel tomaz
miguel tomaz

Reputation: 1

I had the same issue and for what I have seen in other forums this is a dev mode problem, due to how SSR works with dev mode (partial hydration) You can see more here (https://www.framer.community/c/developers/framer-motion-animations-not-working-on-first-load-but-work-after-page-refresh).

I tried to build (npm run build & npm run start) and I think it worked.

Upvotes: 0

Related Questions