成帧器运动滚动框可平滑子动画

Question

我想为顶部的滚动/拖动框复制一个很酷的动画

https://dribbble.com/shots/6396764-Smart-Home-Controller

但仍然不对，您是否有一些想法或代码示例可以使它相等或令人窒息？

https://codesandbox.io/s/framer-motion-path-drawing-drag-and-usetransform-gdrzc?fontsize=14

import * as React from "react";
import { motion, useMotionValue, useAnimation } from "framer-motion";

export const Example = () => {
  const x = useMotionValue(0);
  const contentRef = React.useRef(null);
  const [constrain, setConstrain] = React.useState(200);
  const controls = useAnimation();

  React.useEffect(() => {
    const element = contentRef.current;
    if (element && element.parentElement) {
      setConstrain(element.parentElement.offsetWidth - element.offsetWidth);
    }
  }, []);

  const onDragStart = (event, info) => {
    console.log(info);

    controls.start(i => {
      const isLeft = info.delta.x < 0;
      const index = isLeft ? 2 - i : i;
      return {
        x: isLeft ? -20 : 20,
        transition: {
          delay: index * 0.1
        }
      };
    });
  };

  const onDragEnd = (event, info) => {
    controls.start({
      x: 0
    });
  };

  return (
    <motion.div className="box-container">
      <motion.div
        ref={contentRef}
        className="box-content"
        style={{ x }}
        drag="x"
        onDragStart={onDragStart}
        onDragEnd={onDragEnd}
        dragConstraints={{ left: constrain, right: 0 }}
        dragPropagation
      >
        <motion.div className="box" custom={0} animate={controls} />
        <motion.div className="box" custom={1} animate={controls} />
        <motion.div className="box" custom={2} animate={controls} />
      </motion.div>
    </motion.div>
  );
};