Scaling Symbols

I read this thread which notes that Symbol scaling is possible:

My goal is to create a Pop Up that has text that scales with a rounded corner background element.

I could not get the text to work and figured it’s due to the symbol wrapper not dynamically capable of changing the font size attribute.

This lead me to the SVG Outlined Text route. But now… The scaling is disproportional.

Height stretches more than the width.

What’s odd if the scaling looks as expected within the Hype environment.

Further tests show it’s a problem in FireFox (61.0b4 (64-bit)). Known issue? Workaround? (93.9 KB)

So I was able to fix the problem, but can not recreate the solution to give a step by step… Check the attached file to see properly working version (in FireFox as well as Chrome) (97.8 KB)


Hi Steve!

Not sure what You did to fix it - but here was something that worked for me - using Scale (Height) & Scale (Width) instead of the “Size” properties.


It looks like the width/height somehow got to a state that was not proportionate with the image. If you select the image in your original example you can see that the element bounding box is larger than the image at the end of the animation. I’d be curious how you resized it?

The difference between Hype/Safari/Chrome and Firefox is due to this being an SVG: WebKit-originated browsers love to try to preserve its proportions but Firefox renders the SVG like any other image and uses the element width/height as the sizing. (Personally I’d say Firefox has the better behavior)

Is there more info on the “Bounding Box” as it related to Symbols?

I’ve found it confusing whenever I use Symbols. Generally, my experience with Bounding Boxes are like a display:inline css element which takes up just the space needed to generate a perimeter based on it’s contents.

But in Hype they seem to be independent of their contents. Like independent Containers. But I have not been able to scale them and their contents even if I do resize by using the Ctrl Drag of one of the corners.

Looking at the working and failing versions (SymbolScaling_r2 and SymbolScaling respectively) it’s hard to see what factor caused the issue.

For instance, r2 bounding box view at start of animation using Size parameter:

r2 at completion of animation:

Rendered in FireFox:

And the Original does not look much different in relation of contents to bounding box:

Yet the rendering in FireFox is dramatically different:

I’ll try @JimScott s suggestion with Scale to see if this better isolates what could be the differences between success and failure.

If the relationship between contents and bounding box are critical, I can also try snapping the bounding box to the contents prior to scaling animations. It would be nice to confirm why the difference in these two examples when their bounding boxes look less different than their final result.

Hey Jim,
Thanks for the suggestion and Scale does work without any problems in my test Browsers (FF and Chrome).

This wasn’t related to symbols at all, it was for the image element itself inside the symbol.

Your animation is of the image element.

This is correct; the symbol resizes like a group in Hype - the width and height values of the symbol element do not affect the size of its contents. (The underlying HTML representation is an absolutely positioned div). To this end the size generally only comes into play for mouse hit targets and overflow.

Hype also does not automatically change the bounds because of this nature – you may not want an symbol to overlap other click targets just because you moved an element inside!

If you Command-Drag the corners, you will invoke transform mode and it will use the Scale settings, effectively resizing the symbol.

My question would be to ask why you are using a Symbol for this animation? It doesn’t come into play in this document so far and so is just extra complexity to get at the elements you do care about. If you aren’t planning to reuse the elements/animations inside, I would not use a symbol. You can just animate it on the main timeline or an alternate timeline.

@jonathan , the reason for using a Symbol is that the popup is over a Calendar and there are multiple dates that share the same event.

Gotchya. Did the above explanation help and/or do you have more questions about it?

Yes, I have a general understanding of the symbols parameter though if I had another question it would be what’s the point? Why have a bounding box on a Symbol to begin with? Is there any real benefit?

If I understand you correctly.

The bounding box represents the containing div.
It allows you to move the contents about by it
Scale the contents as one by using it’s scale settings

As for it’s click area. If I think it is going to be in the way by overlaying another element that needs user interaction I turn it’s pointer events off.

All of @MarkHunte’s points are valid.

Symbol instances definitely need an origin so they can be moved around independently.

To give a little more background on development rationale, we did not want Symbols to be too special-casey and thought it made sense that they be fundamentally similar to a Group. Groups themselves have bounds, and this allows for mouse actions to happen on them as well as contents having positions outside their bounds and thus can be affected by overflow. One could make a case instead of this behavior, it could be up to users to put a top level group in a symbol. But that’s just not the route we went!