Visible canvas and percentage based translations about stylie HOT 4 CLOSED

Hi @braaam, I'm glad you're enjoying Stylie. I have given some though previously to how Stylie might handle screen offsets, as I also think it would be useful. However, I'm not sure how I might best integrate that with the rest of the UI. Generally, I think there needs to be some sort of additional UI to facilitate advanced and power user features; I'm pretty much out of room with control pane as it is now. Your canvas offset idea would be a useful addition, but I think it's too specific to belong in the control pane. I'll have to think about how to best approach this.

As for percentage units, I think that too would be useful. As a stopgap, I can add a <select> somewhere to change units. I'll need to make the integration a little more elegant in the long term, but that should be enough to get going with.

I don't have a ton of time lately to work on Stylie, but I'll keep this issue open until I can address it. Until there's a UI for it, you can use Rekapi to generate the CSS you need, as that's all Stylie is actually doing. Thanks for the suggestions!

from stylie.

So I did some research on this.

Apparently I misunderstood/forgot how the transform percentage unit works. I initially assumed that it works like left or top — that is, the value is relative to the container of the element being animated, not the element itself. It is, in fact, the other way around. So, just transforming Stylie's output to equivalent percentage values would not achieve the scaling effect you are looking for:

• http://stackoverflow.com/questions/13103828/css3-translate-in-percent/13104099#13104099
• The spec: http://www.w3.org/TR/css3-transforms/
• transform pen: http://codepen.io/jeremyckahn/pen/ghJjq
• Analogous left/top pen: http://codepen.io/jeremyckahn/pen/dJvoL

Definitely a bummer, as I think it would be a really nice feature to have.

from stylie.

I'm not sure if this helps you, but I just pushed a feature that allows you to orient an animation to the first keyframe: https://twitter.com/jeremyckahn/status/401859377490952193

from stylie.

Thanks for the heads up, that's pretty useful! Will definitely be helpful when using in a fixed pixel-size environment.

from stylie.