Path animation

[nvh]

This is basically a really light-weight re-implementation of https://github.com/koenbok/Framer/pull/151.

Here's an example: https://framer.cloud/RiKaw

The API is as follows:

wave = new SVGLayer
    width: 762
    height: 470
    point: 100
    backgroundColor: null
    html: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="762" height="470"><path id="shape-id-a6lZkKiUM" d="M 0 470 C 126.91666666666663 470 126.91666666666663 0 253.83333333333331 0 C 380.75 0 380.75 470 507.66666666666663 470 C 634.5833333333333 470 634.5833333333334 0 761.5 0" transform="translate(0.5 0) rotate(0.0000 380.75 235)" fill="transparent" stroke-width="1" stroke="#AAA" stroke-linecap="butt" stroke-linejoin="miter" stroke-dasharray="10" stroke-dashoffset="0" stroke-miterlimit="4"></path></svg>'

path = wave.path
triangle.originY = 0
triangle.midX = wave.pathStart.x
triangle.y = wave.pathStart.y
triangle.animate
    point: path
    rotation: path
    options: 
        time: 10

I've added a path property to SVG layer that only returns an SVG path if it's the only child of the svg. This is a bit limiting, but hopefully makes the API a bit clearer

[jonastreub]

Really cool! While the API is super clean I wonder if it is intuitive. Wouldn't it be more clear if the function would be named somethings like: layer.animateAlongPath(path, enableRotation)

[nvh]

I agree that it isn't really discoverable, but I'm also not sure if this is going to be used as much that it justifies a separate function. We could of course always create a wrapper function that does this later.

[marckrenn]

Initially I would have sided with Jonas here, but after briefly using the API myself I think Niels' approach is ultimately better. A wrapper function would be a "nice to have" but I don't see it as being absolutely necessary.

However, if you decide to add such a function, please allow to pass animationOptions as an optional argument layer.animateAlongPath(path, enableRotation, animationOptions = Framer.Defaults.Animation).

[nvh]

That's what I had at some point, but this doesn't show errors in Framer for Mac, and it can be pretty confusing, because setting a null animation value will just do nothing, and changing some properties that seem unrelated in Design can cause the SVG to suddenly not be a single path anymore. What are the disadvantages of throwing errors? These are certainly programming errors in my view, that should be handled asap by the user.

[jonastreub]

You could also only throw when run inside Studio

[nvh]

That's smart! Will do!