I am barely a week-old Hype user
I have been trying to create clickable alphabets (a circle that contains a text element with a letter) that pops up when clicked/touched then eases back down immediately. I have managed to get the animation to work, but, it seems to me that the text (the letter itself) is not expanding and shrinking smoothly. It appears to wobble slightly inside the circle as it expands/shrinks.
Alternatively, I tried using an image of the letter, instead, and placed it inside the circle, and it worked very nicely. Very smooth. But, that is not only cumbersome, but also, it is not what I would like to achieve later by having these text elements read from a text file.
Is there a way to get the text to expand and shrink smoothly, or am I going about it the wrong way?
Can you share a zip of your .hype document (along with any instructions to see the element in question) and also what browser you are seeing the wobble on?
The alphabet is Arabic. There are four sample letters of them on the shared hype document. There is a simple JS function that ensures that the clicked item remains on top while expanding then shrinking. I am testing it on Safari.
The issue is that your animation is using the font size, which uses integral font sizes for its steps (instead of fractional, which would look smoother) and also the browser needs to re-render the fonts and may use different hinting for different sizes.
Instead my recommendation is to use the scale property in the Metrics Inspector. You can either type in values, or hold down the command key for transform mode and use the element’s resize handles. You can do this for the entire group in fact, so you would only need one animation instead of two.