Next.js + Framer Motion 滚动进度动画答案

【问题标题】：Next.js + Framer Motion scroll progress animationNext.js + Framer Motion 滚动进度动画
【发布时间】：2022-01-15 12:07:58
【问题描述】：

所以我想在 Next.js 应用程序中使用 Framer Motion 创建一个视口滚动进度圈（使用 tailwind 作为 CSS）。我使用了 Framer Motion 的示例代码： https://codesandbox.io/s/framer-motion-viewport-scroll-and-svg-path-animation-mwi35?from-embed=&file=/src/Example.tsx:686-1070

我在这里的代码显示了圆圈，但是当我启用 strokeDasharray 或 pathLength（在样式属性中）时，它消失了。在滚动时，我看不到任何事情发生。

我尝试了不同的 svg 版本，但没有成功。我还查看了我的 json.config 并将其与示例进行比较，但由于它使用 TypeScript，我无法弄清楚。

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;

如果我能让动画工作就太好了。

【问题讨论】：

标签： reactjs svg next.js framer-motion

【解决方案1】：

如果您的 css 代码如下

html,
body: {
  width: 100%
}

删除并重试。我遇到了同样的问题，就这样解决了。

【讨论】：