Next.js + Framer Motion scroll progress animation

Question

So I want to create a viewport scroll progress circle with Framer Motion in a Next.js app (using tailwind as CSS). I used the example code from Framer Motion: https://codesandbox.io/s/framer-motion-viewport-scroll-and-svg-path-animation-mwi35?from-embed=&file=/src/Example.tsx:686-1070

The code I have down here displays the circle, but when I enable strokeDasharray or pathLength (in the style attribute) it disappears. And on scroll I don't see anything happening.

I tried different svg versions, but I didn't get it working. I also looked at my json.config and compare it with the example, but since it uses TypeScript I could not figure it out.

import * as React from 'react';
import { useEffect, useState } from 'react';
import {
  motion,
  useViewportScroll,
  useSpring,
  useTransform,
} from 'framer-motion';

const CircleIndicator = () => {
  const { scrollYProgress } = useViewportScroll();
  const yRange = useTransform(scrollYProgress, [0, 0.9], [0, 1]);
  const pathLength = useSpring(yRange, { stiffness: 400, damping: 90 });

  useEffect(() => yRange.onChange((v) => setIsComplete(v >= 1)), [yRange]);

  return (
    <>
      <svg className='fixed w-12 h-12 bottom-7 left-7' viewBox='0 0 60 60'>
        <motion.path
          fill='none'
          strokeWidth='2'
          stroke='white'
            // strokeDasharray='0 1'
          d='M 0, 20 a 20, 20 0 1,0 40,0 a 20, 20 0 1,0 -40,0'
          style={
            {
              // pathLength,
              //     rotate: 90,
              //     translateX: 5,
              //     translateY: 5,
              //     scaleX: -1, // Reverse direction of line animation
            }
          }
        />
      </svg>
    </>
  );
};

export default CircleIndicator;

It would be great if I could get the animation to work.

Answer 1

If your css codes have below

html,
body: {
  width: 100%
}

delete it and try again. I has the same problem and solved it this way.