Animate pathLength of chart with Framer Motion

[MaximeHeckel]

Hi 👋

First of all, I love visx and I think the approach you took with this library is the best: little opinionated, still higher level than raw D3.

I'm doing a couple of little experiment trying to integrate visx with framer-motion, it works perfectly, however, I'm struggling with the following:
I would like my AreaClosed chart to "draw" itself on render (from left to right), and for that I'd usually base my animation on the pathLength attribute of the <path/> element when using Framer Motion:

const MyChart = (props) => {
   const pathVariants = {
      initial: {
        pathLength: 0,
      },
      animate: {
        pathLength: 1,
      },
    };

    const pathLength = useMotionValue(0); 

  return (
      <svg width={width} height={height}>
          <AreaClosed
            data={formattedData}
            x={...}
            y={...}
            yScale={...}
            curve={curveMonotoneX}
          >
            {(area) => (
              <g>
                <motion.path
                  d={area.path(formattedData)}
                  initial="initial"
                  animate="animate"
                  stroke="url(#hr)"
                  variants={pathVariants}
                  fill="url(#hr)"
                  style={{ pathLength }}
                />
              </g>
            )}
          </AreaClosed>
      </svg>
  )
}

Also I noticed that setting the pathLength attribute manually does not work either.

Do you know if it's possible to achieve the desired effect with Framer Motion? Since it's my only "animation library" on my project I'd really want to avoid introducing something different for charts if possible

Thank you in advance for your help!

[MaximeHeckel]

Ok I think I got something that's almost there but not quite:

1. I was able to get a "drawing" animation by getting inspired by the LineRadial example in your docs: https://airbnb.io/visx/lineradial

Instead of react-spring I actually figured out a way to make it work with Framer Motion: I needed to set the strokeDasharray and strokeDashoffset attributes instead of the pathLength:

{(area) => (
      <g>
        <motion.path
          d={area.path(formattedData)}
          initial="initial"
          animate="animate"
          stroke="url(#hr)"
          variants={pathVariants}
          style={{
              strokeDashoffset: pathLength,
              strokeDasharray: pathLength,
            }}
        />
      </g>
    )}

2. Somehow I can't manage to make this happen at "mount" time. I can only make the animation happen by toggling a state. Without toggling a state the chart simply renders immediately without triggering the animation. Not blocking just a bit weird. Do you have more info on that?

3. This worked well for the line, the filled part of the chart is not animated I guess that's just not possible as is (I'd basically want the filled part of the area chart to grow from left to right while following the line). Will need to continue tweaking

[williaster]

Hey @MaximeHeckel 👋 thanks for checking out visx. Since this is a usage question rather than an issue, I'm going to move it over to our github discussions. I'm not super familiar with Framer Motion, but we do have an example of animating a line path in our radial line example using react-spring, which you just posted as I was typing this 😄

---

Re animation

I'm not familiar with the pathLength approach you were trying to use initially, but the lineDasharray is the most common solution I've seen for "revealing" lines. However SVG areas paths often have circular shapes (e.g., closed areas basically draw a big circle to close on themself) so I'm not sure you will actually be able to do what you're envisioning by animating the path this way. For advanced animation/tweening like that, you may need to rely on custom interpolators which can interpolate the path's d string better. In our @visx/xychart library we use d3-interpolate-path to interpolate between new data or changing numbers of points (it doesn't sweep across as in your example, see the demo here to play with the animation), but you could consider flubber which is made for closed shapes (still not sure you could sweep like you want).

Given all of the complexity described above^, I wonder if it would be simpler for you to animate a rect (maybe as a clipPath) if you simply want to reveal the line. Depending on how you do it that should just involve animating a width from 0 => width or width => 0.

---

Re animating on mount

This might because of two successive renders which happen very quickly. For the 1st render, you would maybe be interpolating from 0 => value but on the second render you would be interpolating value => value ... which requires no animation :). We faced this issue in @visx/xychart and solved it by debouncing the calls.

[williaster]

Was toying with the clipPath approach and it seems to work pretty well. We have a @visx/clip-path package which simplifies the definition of these, which is what I used.

Here's the sandbox.

[williaster]

Slowed it down and added a rect with the same clipPath so you can see what's being animated

[MaximeHeckel]

@williaster
Thank you for converting the issue as a discussion and for your help

I wonder if it would be simpler for you to animate a rect (maybe as a clipPath)🙏

That's actually one idea I had in mind, I'll need to give it a try and take a look at your sandbox. Thank you for taking the time to put this together

This might because of two successive renders which happen very quickly

That might actually be the case since I'm working on a project that involves server-side rendering. Double rendering issues are quite common. I'll try to find a decent solution and post that below otherwise I'll use the debouncing trick 😄

[MaximeHeckel]

@williaster thank you for your help and the examples you provided. After taking a further look today I managed to reproduce the effect I wanted:

Screen.Recording.2021-02-10.at.7.11.50.PM.mov

The ClipPath method worked perfectly, I was amazed to see it work on the first try 😄! I still haven't fully solved the multiple renders issue for the linepath animation, but I added a small hack with a timeout to work around it in the meantime (I'll make sure to update the code snippet below if I find a solution in the meantime)

For anyone else looking for a similar animation powered by Framer Motion here's the rough implementation:

const LineChart = ({}: any) => {
  const [shouldAnimate, setShouldAnimate] = React.useState<boolean>(false);

  const pathVariants = {
    initial: {
      pathLength: 0,
    },
    animate: {
      pathLength: 1,
      transition: {
        ease: "easeInOut",
        duration: 2,
      },
    },
  };

  const areaVariants = {
    initial: {
      width: "0%",
    },
    animate: {
      width: "100%",
      transition: {
        delay: 0.5, // To keep the area and path animation synced we need to add a delay of 500ms 
        ease: "easeInOut",
        duration: 2,
      },
    },
  };

  const pathLength = useMotionValue(0);

  /**
   * Work around for double render happening with server-side,
   * we "toggle" the animation 500ms after mounting the UI
   */
  React.useEffect(() => {
    setTimeout(() => setShouldAnimate(true), 500);
  }, []);

  return (
    <div>
      <svg width={width} height={height}>
        <rect
          x={0}
          y={0}
          width={width}
          height={height}
          fill="#F9F9FA"
          rx={20}
        />
        <ClipPath id="myClip">
          <motion.rect
            x={0}
            y={0}
            height={height}
            initial="initial"
            animate="animate"
            variants={areaVariants}
          />
        </ClipPath>
        <Group clipPath={"url(#myClip)"}>
          <AreaClosed
            data={formattedData}
            x={...}
            y={...}
            yScale={,,,}
            curve={curveBasisOpen}
            fill="url(#hr)"
          />
          <LinePath
            data={formattedData}
            x={...}
            y={...}
            curve={curveBasisOpen}
          >
            {({ path }) => {
              const d = path(formattedData) || "";

              return (
                <>
                  {shouldAnimate && (
                    <motion.path
                      d={d}
                      strokeWidth={2}
                      strokeOpacity={0.8}
                      strokeLinecap="round"
                      fill="none"
                      stroke="#ff008c"
                      initial="initial"
                      animate="animate"
                      variants={pathVariants}
                      style={{
                        strokeDashoffset: pathLength,
                        strokeDasharray: pathLength,
                      }}
                    />
                  )}
                </>
              );
            }}
          </LinePath>
        </Group>
      </svg>
    </div>
  );
};

export { LineChart };