search

mdgriffith / elm-style-animation

The style animation library for Elm!
http://package.elm-lang.org/packages/mdgriffith/elm-style-animation/latest
BSD 3-Clause "New" or "Revised" License
440 stars 40 forks source link

Rotate does not allow user to specify origin #29

Closed noahzgordon closed 7 years ago

noahzgordon commented 7 years ago

The rotate transform for SVG takes two optional arguments that describe the point about which the element is to be rotated. Because the library does not expose these two arguments, the default of (0, 0) is always used. If I want to rotate an element about its center, I have to provide a transform value to compensate the rotation.

IMHO the ideal interface would look something like this:

rotate : Angle -> Maybe (Float, Float) -> Property
berry commented 7 years ago

I ran into the same problem. It applies to all transforms. There is something in SVG like "transform-origin" with which you can set the origin of the transformation. See: https://developer.mozilla.org/nl/docs/Web/CSS/transform-origin. However, this attribute is not available in elm-style-animation or in elm-lang/svg.

Would be very helpful if this can be fixed.

berry commented 7 years ago

And the rubber duck effect (https://en.wikipedia.org/wiki/Rubber_duck_debugging) kicked-in immediately after writing my comment. I found a solution:

rect (Animation.render style ++ [ Html.Attributes.style [ ( "transform-origin", "50% 50%" ) ] ] ++ [ x (ts (px + 10)), y (ts (py + 10)), width "100", height "100", rx "5" ]) []

So, I added the "transform-origin" attribute on my svg rect that I am animating and it works perfectly!

mdgriffith commented 7 years ago

I'll take a look at this later today. It's interesting to see the SVG rotate and the CSS rotate differ a bit regarding syntax around origin.

Fyi, you can also set transform-origin in your animation with Animation.exactly, you just can't animate it.

noahzgordon commented 7 years ago

@berry good workaround! I was literally adding a second transformation each time to compensate for the rotation about (0,0); your solution is MUCH cleaner.

mdgriffith commented 7 years ago

transformOrigin is now directly supported in 3.5.1!