I try to use “option” key + drag to scale the element in scene, and it change the “top” and “left” values also.
Appearently the final sclae animation is not good enogh, so is that have any solution to solve this problem?
Shift + drag might be what you’re looking for…
Not exactly…
shift+drag not scale from the center of element, think about css animation transform:scale(), it’s base on the origin property.
Althrough I can use option+drag realize the scale from center, but the animation is not smooth, the css3 is better right?
Check the example, the left one is base on css3 animation, another is base on hype keyframe, so you can find it much different.
scale.hype.zip (33.1 KB)
1 Like
I see it now, the one on the left is much smoother (to my eyes) - This might be a good “Tips & Trick” example.
I add css code into section to realize the animation, so is that possible use hype keyrame to do the same thing directly?
Officially: It isn’t possible with the current shipping version of Hype to keyframe on transform:scale(). Your workaround is the best method if you want to use it.
Unofficially: I’m working on this today 
. We planned to make it part of 3.0, but ran out of time to finish. Your animation as it is will also be improved because we’ll be using fractional values for position/size in the next version. (Of course we haven’t shipped, there could be issues requiring us to pull this. I also can’t comment on a release schedule).
2 Likes
Is this still not possible in Hype 4?
option-command will use scale and rotate ...
so it's a transform ...
looks like ... in the output:
transform: translateX(249px) translateY(149px) rotate(28deg) scaleX(2) scaleY(2);
@h_classen does that then produce key frame animations? Also is it ⌘ + ⌥ + Click and drag, or do I have to select a property?
Specifically Hype will automatically make animations if you are in record mode. This is nothing specific to using scale properties or holding the option key.
Hype implemented the scale properties in v3.5 a while ago. These can be found in the Metrics inspector or triggered using transform mode by holding down the command key when working in the scene. This mode swaps from using the width/height of the actual element size to the transform scale.
Thanks @jonathan, for anyone else looking clicking the tiny chevron on the properties pane will allow you to select which properties appear in the panel.
1 Like