Using `transform` property in `toWith`

[marick]

Is there a way within this library to use something like transform rotate(80deg)? It's an animatable property, but I can't seem to get it to work. It appears that exactly is only for use with Animation.set, not gradual animations like toWith.

I'm trying to move a clock hand (using the three-argument version of rotate). I can do it with a polygon or path, but I was hoping to take advantage of defs and marker to make an arrowhead that rotates nicely along with the line.

[marick]

Hmm... Hold on. I just realized you can add markers to path elements.

[mdgriffith]

Let me know how it goes. In general it's hard to comment unless I can see some code :)

[marick]

Here is how I would like to use transform: https://github.com/marick/eecrit/blob/no-rotate/web/elm/IV/Clock/View.elm#L159 (It also changes the line width and color so that I can see that something's happening.)

Here is the update: https://github.com/marick/eecrit/blob/no-rotate/web/elm/IV/Clock/Update.elm#L21 (Again, I wouldn't be putting the animation in a loop in real life, but it doesn't make a difference.)

[mdgriffith]

Can't you just use

Animation.set 
    [Animation.rotate (deg 80)
    ]

?

[marick]

I need a smooth transition (showing hours passing as IV fluid drains), so I can't use set.

Rotate does work, but because it doesn't take the optional x and y arguments, I have to figure out how to set "the origin of the current user coordinate system" to the center of the clock. This is probably obvious, but I'm learning CSS animation as I go.

[mdgriffith]

Oh, got it!

You can use transform-origin to do that.

[marick]

That worked. Thanks.

P.S. Since Svg.Attributes doesn't seem to have a way to add custom attributes (though I don't understand what its attributeName and attributeType are about), I used Html:

  , markerEnd "url(#arrow)"
  , Html.Attributes.attribute "transform-origin" "260px 200px"

Would it be more idiomatic to drop all the way down to VirtualDom.attribute?

[mdgriffith]

I think you can just apply it as a style property actually (it's one of those weird properties that works as an attribute or in the css style).

So either

div [style [("transform-origin", "260px 200px")]] []

Or include it in your style init using exactly

Animation.style [exactly "transform-origin" "260px 200px"]

[marick]

All is happy except for Firefox. Do you offhand know of any reasons why Firefox (latest version) wouldn't obey transform-origin? -- at least, that's at least part of what seems to be happening here.

[mdgriffith]

try adding the property twice. Once as transform-origin and once with the mozilla vendor prefix -moz-transform-origin.