calculating a css easing function from an svg path

Question

I have a circle that follows an svg path using the css offset-path declaration:

circle {
  offset-path: path('M-0.4-3.3l-30,50c0,0,27,79,79,79c0,0-72-32-79-170c0,0-145,86-254-40');
}'

Then I have an animation with a set of keyframes for how far along that animation should be at each phase of the animation:

@keyframes circlePath {
    0% {
        offset-distance: 0%;
    }

    10% {
        offset-distance: 8.8%
    }

    56% {
        offset-distance: 25.7%
    }

    84% {
        offset-distance: 54.2%
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

and if I were to graph out the easing curve I want at each step of the way, it would look like the second image below, and have the following svg path coords:

<path class="st0" d="M284.4,81.3l-30,50c0,0,27,79,79,79c0,0-72-32-79-170c0,0-145,86-254-40"/>

Is there a way to create a css easing function from that path? Or in other words, is there a way to create a multi-stage bezier easing function?

Motion Path:

Easing at each step of the path's progress:

You don't need to. The easing function can be applied on a keyframe basis. — vals, May 25 '18 at 13:48

score 1 · Accepted Answer · answered May 25 '18 at 14:11

You can define easing functions on a per-keyframe basis by setting animation-timing-function. This is a simplified version of your requirements, just to exemplify:

@keyframes circlePath {
    0% {
        offset-distance: 0%;
        animation-timing-function: ease-in;
    }

    10% {
        offset-distance: 8.8%
        animation-timing-function: linear;
    }

    56% {
        offset-distance: 25.7%
        animation-timing-function: ease-in-out;
    }

    84% {
        offset-distance: 54.2%
        animation-timing-function: ease-out;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

You will probably need to define cubic bezier functions to get the precise result you wanted.

Wow - I had no idea you could do separate timing functions! That's exactly what I need. Didn't occur to me to try that. Thanks! — mheavers, May 25 '18 at 14:51

calculating a css easing function from an svg path

1 Answers1