Have a bit of an annoying issue. I’m using Framer Motion and NextJS SSR. When the page first loads (seemingly before the UseEffect kicks in) the element loads and is visible in its “end” position, then the framer motion animation kicks in causing the text to disappear and then slide up which is quite jarring. Only does it when the connection is kind of slow.

Hoping someone might be able to help out. I’m building a site with NextJS, and I want to use Framer Motion for animations. What I want to happen is as I scroll down the page, I want the elements to fade in one by one. However I also want a slight delay between elements. Documentation doesn’t seem to be helping me out here

Link to working example of the issue i’m facing example

I’m building the website using Next.js, Tailwind and adding simple animations to sections and text with Framer Motion. However, I’m experiencing an issue that slows down my development. When I run my project with npm run dev all animations work perfectly, but once I make any update to the code or animation, seems like I see the initial value for the animation, which is usually opacity 0. I tried refreshing and empty cache and hard reload-didn’t work. I can’t figure how to fix this other than opening the project in the new port again but it’s really annoying.

The problem is the delay applied in animate variants is applied in the hover as well.
I tried to add transition with delay: 0 in whilehover but don’t work.

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?

When i view my webpage in smaller screen it looks like this

`