How to realize the same effect as "transform:scale()" css3 animation style?


#1

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?


(Greg) #2

Shift + drag might be what you’re looking for…


#3

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?


#4

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)


(Greg) #5

I see it now, the one on the left is much smoother (to my eyes) - This might be a good “Tips & Trick” example.


#6

I add css code into section to realize the animation, so is that possible use hype keyrame to do the same thing directly?


(Jonathan Deutsch) #7

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 :smile:. 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).