Next.js Discord

Discord Forum

Framer-motion svg is broken in page navigation Nextjs 14

Unanswered
Siberian Accentor posted this in #help-forum
Open in Discord
Siberian AccentorOP
"use client";
import { motion } from "framer-motion";
import Link from "next/link";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <BlueLineSVG />

      <Link href="/hero">Go to different page</Link>
    </main>
  );
}

export function BlueLineSVG() {
  const pathVariants = {
    hidden: { opacity: 1, pathLength: 0 },
    visible: { opacity: 1, pathLength: 1, transition: { duration: 3 } },
  };

  return (
    <div className="absolute top-[400px] -z-50 w-[640px] sm:top-[400px] sm:w-[768px] md:w-[1024px] lg:w-[1280px] xl:top-[400px] xl:w-[1536px] 2xl:w-[2560px] overflow-x-hidden">
      <motion.svg viewBox="0 0 602 178" animate="visible">
        <motion.path
          variants={pathVariants}
          d="M0 527.203 11.1447 528.871C22.2226 530.54 44.5119 533.876 66.7345 505.714 88.9571 477.619 111.246 417.958 133.469 395.068 155.692 372.178 177.981 385.926 200.204 402.943 222.426 419.96 244.716 440.248 266.938 442.45 289.161 444.652 311.45 428.903 333.673 420.561 355.895 412.219 378.185 411.285 400.407 418.626 422.63 425.967 444.919 441.582 467.142 437.645 489.364 433.774 511.654 410.417 533.876 396.87 556.099 383.256 578.388 379.519 589.466 377.584L600.611 375.715"
          stroke="#0066FF"
          strokeWidth="6"
          strokeLinecap="round"
          stroke-linejoin="miter"
          stroke-miterlimit="4"
          stroke-opacity="1"
          fill="none"
          fill-rule="nonzero"
          transform="matrix(1.00231 0 0 1 88 65.0238), translate(-88 -434)"
          vector-effect="non-scaling-stroke"
        />
      </motion.svg>
    </div>
  );
}

39 Replies

Siberian AccentorOP
when I click the go to different page back to this page using brower back button is just broken
Siberian AccentorOP
Anyone please help ??
@Siberian Accentor Anyone please help ??
Ray
have you tried to fix those prop in jsx?
stroke-linejoin="miter"
stroke-miterlimit="4"
stroke-opacity="1"
fill="none"
fill-rule="nonzero"
Siberian AccentorOP
Let me try it
@Ray It didn't work, the thing is when I click the Go to different page and back to the page the svg broken
but I tried to navigate using browser prev and next button and it didn't broke it
I think it associated with next/link ?
Siberian AccentorOP
I think I got it
the pathVariant is not working right, how I can make it work
@Siberian Accentor the pathVariant is not working right, how I can make it work
Ray
visible: { opacity: 1, pathLength: 3, transition: { duration: 3 } },
Siberian AccentorOP
didn't work, It works correctly when I use <a> tag but I changed it Link tag the line choped
is it associated with link prefetch or anything else ?
Siberian AccentorOP
what is the solution then, I'm doing the wrong way ?
Ray
fix your svg
Siberian AccentorOP
how
Siberian AccentorOP
The problem is when I click the 
<Link href="/hero">Go to different page</Link>
and I navigate back to this page, the svg is choped
like broken line
Ray
i dont have problem with your code
export default function BlueLineSVG() {
  const pathVariants = {
    hidden: { opacity: 0, pathLength: 0 },
    visible: { opacity: 1, pathLength: 3, transition: { duration: 3 } },
  };

  return (
    <div className="absolute top-[400px] -z-50 w-[640px] sm:top-[400px] sm:w-[768px] md:w-[1024px] lg:w-[1280px] xl:top-[400px] xl:w-[1536px] 2xl:w-[2560px] overflow-x-hidden">
      <motion.svg viewBox="0 0 602 178" animate="visible">
        <motion.path
          variants={pathVariants}
          d="M0 527.203 11.1447 528.871C22.2226 530.54 44.5119 533.876 66.7345 505.714 88.9571 477.619 111.246 417.958 133.469 395.068 155.692 372.178 177.981 385.926 200.204 402.943 222.426 419.96 244.716 440.248 266.938 442.45 289.161 444.652 311.45 428.903 333.673 420.561 355.895 412.219 378.185 411.285 400.407 418.626 422.63 425.967 444.919 441.582 467.142 437.645 489.364 433.774 511.654 410.417 533.876 396.87 556.099 383.256 578.388 379.519 589.466 377.584L600.611 375.715"
          stroke="#0066FF"
          strokeWidth="6"
          strokeLinecap="round"
          strokeLinejoin="miter"
          strokeMiterlimit="4"
          strokeOpacity="1"
          fill="none"
          fillRule="nonzero"
          transform="matrix(1.00231 0 0 1 88 65.0238), translate(-88 -434)"
          vectorEffect="non-scaling-stroke"
        />
      </motion.svg>
    </div>
  );
}
the svg is broken when the pathLength is 1 for visible
same result with vite+react
Siberian AccentorOP
The problem is when I click the link and back to this page
I'm building in the Nextjs 14
Ray
I can't reproduce it
or can you provide a reproduction
Siberian AccentorOP
the first code snippet the the reproduction
"use client";
import { motion } from "framer-motion";
import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <BlueLineSVG />
      <Link href="/hero">Go to different page</Link>
    </main>
  );
}

export function BlueLineSVG() {
  const pathVariants = {
    hidden: { opacity: 1, pathLength: 0 },
    visible: { opacity: 1, pathLength: 1, transition: { duration: 3 } },
  };

  return (
    <div className="absolute top-[400px] -z-50 w-[640px] sm:top-[400px] sm:w-[768px] md:w-[1024px] lg:w-[1280px] xl:top-48 xl:top-[400px] xl:w-[1536px] 2xl:w-[2560px] overflow-x-hidden">
      <motion.svg viewBox="0 0 602 178" initial="hidden" animate="visible">
        <motion.path
          variants={pathVariants}
          d="M0 527.203 11.1447 528.871C22.2226 530.54 44.5119 533.876 66.7345 505.714 88.9571 477.619 111.246 417.958 133.469 395.068 155.692 372.178 177.981 385.926 200.204 402.943 222.426 419.96 244.716 440.248 266.938 442.45 289.161 444.652 311.45 428.903 333.673 420.561 355.895 412.219 378.185 411.285 400.407 418.626 422.63 425.967 444.919 441.582 467.142 437.645 489.364 433.774 511.654 410.417 533.876 396.87 556.099 383.256 578.388 379.519 589.466 377.584L600.611 375.715"
          stroke="#0066FF"
          strokeWidth="6"
          strokeLinecap="round"
          stroke-linejoin="miter"
          stroke-miterlimit="4"
          stroke-opacity="1"
          fill="none"
          fill-rule="nonzero"
          transform="matrix(1.00231 0 0 1 88 65.0238), translate(-88 -434)"
          vector-effect="non-scaling-stroke"
        />
      </motion.svg>
    </div>
  );
}
when you navigate for example to '/test ' and back to this page the svg is got broken
you have jsx issue with the code
Siberian AccentorOP
what issue ?
Ray
check your brower console
Siberian AccentorOP
Yeah I did and fix the error but
When I change the vector-effect to vectorEffect like the console suggestion the svg broken even if the didn't navigate