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.

"use client";
import { useEffect } from "react";
import { usePathname } from 'next/navigation';

import { animate, stagger, inView } from "motion"

export default function ClientApplication({ children }) {
  const pathname = usePathname();

  useEffect(() => {
    console.log(pathname)

    inView(".fadeIn", () => {
      animate(
        ".fadeIn",
        {
          opacity: [0, 1],
          y: [20, 0]
        },
        {
          duration: 1,
          delay: stagger(.5),
          initial: { opacity: 0 }
        },
      )
    })

  });
  return children;
}