We love hype and have 3 people working with the program here. Some full-time day in and out. However, besides the many stability issues we are having mayor problems with animated objects that have rotated. After rotation it seems impossible to re-scale.
For one animation we actually need thin lines, we havent found a solution to draw these so we need to use thing boxes or pasted images. However they all have the same issues. Is there anyone here who managed to animate, rotate and then scale thin lines? (Without Hype Crashing all the time…)
hey,
Yeah sadly not using the hype built in methods though you could hack it by making an empty box and manipulating the scale
See manipulateScale.zip (10.4 KB)
I did
hypeDocument.setElementProperty(testBox, ‘scaleX’, 0, 1.0, ‘easeinout’)
hypeDocument.setElementProperty(testBox, ‘rotateZ’, 90, 1.0, ‘easeinout’)
Which was like a cheap way to animate the line width so you could do that if you want(though in the future it’d be great if “strokeWidth” is a property in that built in function)
Or you could use another library put into hype with svg lines gsapScale.zip (54.2 KB)
var lines = document.getElementsByClassName(‘lines’);
TweenMax.to(lines,1,{strokeWidth:10,ease:Sine.easeInOut});
TweenMax.to(lines[2],2,{rotation:-90,ease:Back.easeInOut});
TweenMax.to(lines[4],2,{rotation:40,ease:Back.easeInOut});
I use that one because it’s readable , but problem is when you’re animating stroke width it will animate in 1, 2, 3, 4 etc increments so the slower it is the more noticeable the stroke change will be.
You could instead animate shapes and their fills but it’s project specific. When you animate scale and width though it will look smoother.
If anyone else has had better luck animating stroke width another way let me know
Starting with @Luckyde’s Hype project demo:
The line (rectangle set to 4 px) moves & rotates, then its width is scaled to 300%. It also works to scale the line while it is moving & rotating - but your spec was to do the animation then scale.
We’re aware of issues with resizing/scaling and plan to fix them in a future release - I understand how frustrating they can be. (The math is pretty difficult, it turns out) My recommendation for now is that if you have rotated an element to use the inspector controls to adjust the scale/width/height.
We indeed created some fake lines with thin boxes and while animating and rotating with the inspector we changed the width everytime we needed to make adjustments in height (otherwise you can not select the top or bottom of the “line”). Hype did not crash while doing this so it worked out. Took a lot of time though.