Every time I resize a symbol in a different layout the symbol resizes in the other layouts. Nearly 2 hours I have been looking a this, looking through the forums etc no further on…it’s killing me!
I have a button symbol made up of 2 svg images (an UP state and a HOVER state)
I currently have just 3 layouts one for Desktop, iPads, iPhone
I double click the istance (in any layout) and resize it. ( Nothing happens if I single click to select the instance. If I do then the pink bounding box with handles on appears and can be resized but it doesn’t resize the symbol. )
Don’t die! You’re experiencing a feature of symbols – when a symbol is changed, it affects all instances of that symbol. Resizing an element within a symbol updates it immediately across all layouts and scenes where that is used.
When you single click a symbol, you are select the symbol and any resize of this will affect the bounds of the symbol but not the actual elements within the symbol. By ‘bounds’ I mean the clickable area of the symbol. A symbol can have a ‘mouse click’ action attached to it. The bounds behave similar to how a ‘group’ works in Hype.
The seems like something you could do with a single button copied across all your layouts. One thing we’d like to allow in the future is different sizes for symbols on different layouts (this almost made it into the 3.0 release).
@stephen might have more specific recommendations for this use case
I have the same issue. I appreciate that ‘symbols’ have consistent properties across layouts, but it would be really nice to be able to have an override that permits changes to symbols that don’t reflect stage wise. That or the previously requested symbol resize - that would be a much, much better way to achieve this without having to duplicate symbols and sub-symbols in layouts to get true responsiveness.
Hey, I came here looking for an answer, and I have a workaround solution, inspired by a template I saw in the templates folder.
First, make one layout for your large layout, and another for your iphone. Now, make a new persistant symbol in the large layout, and name it iphoneSymbol. put a text box in it. drag it outside of the layout’s area. In the iphone layout, resize the symbol to be the size you want for your iphone. Name your scene something like “scene1.” In the large template, make some text, and edit the html so that the id is the same name as your scene (scene1).
Create a new function that you load on Layout load. put this code in your function:
var templateHTML = hypeDocument.getElementById(hypeDocument.currentSceneName()).innerHTML;
console.log(templateHTML);
hypeDocument.getSymbolInstancesByName('iphoneSymbol')[0].element().children[0].children[0].innerHTML = templateHTML;
Now, the layout will load the contents of your div with the text into the symbol on the iphone layout.
Note that I used .innerHTML because I wanted to preserve the formatting (colors, divs, paragraphs, etc). If you know that you just want the text, you can change that to .textContent in both functions, but this will give you messy HTML if you have anything other than text in the div.
Hey! I stumbled upon this cause I have the same issue and would like to ask if this is now implemented in Hype cause this topic is almost 3 years old.
I’m working on flowchart graphics with dozens of textboxes. And symbols would save me A LOT of time if they could have different sizes on different layouts.
Cheers
Stefan
Hype v3.5 introduced element scaling, so on each scene/layout with the symbol, you can take the symbol element and rescale with the command key (or use the Scale properties in the Metrics Inspector).
This is more of a “top level” visual effect than a per-instance override (which is a good idea but not implemented yet).
Is there an option where we make one Symbol work with nested symbols. Override (see the first 4 min.) the information with the given other smaller symbols we defined. I use it all the time in Framer and Sketch.
This Option would be groundbreaking if we could get this done in Hype. Now I keep having to make new Symbols from scratch. Or I am doing it wrong. That could also be possible.
I will give that a try, but renaming symbols is not an option. all symbol instances change with it.
UPDATE:
That works. Thx. Another thing. When I am using multiple timelines the boxes are overlapping each other disabled the hover effects. So I am thinking to use scenes instead of timelines.
If I hide the map element (see video 2, it’s a download mp4) the orange block is clickable only then Hype doesn’t animate correctly anymore. And that is a shame. Maybe my brain is thinking of things that are not technically possible. But are allowed to be generated inside of Hype.
I’m not sure I was quite able to follow the steps and get into a state where the hover wasn’t working… I tried watching the second video you linked to but didn’t quite see it. Any chance you could list in steps what to click and when the hover stops working?
My general suggestions would be to make sure that you have animations that set above elements to set the display as hidden (generally after doing an opacity fade out). This will make clicks pass through even if it is above. I see you have that for the map on one of the timelines but I’m guessing it isn’t being set at the right time?
you should download the hype file and check the layer arrangements. I thought I use a z-index option to make one layer move up on fade to 80% alpha. only there is not option in hype. could be an idea?
no, why i am asking to look at the file is that the animation is jumping ahead of the timeline and not play the set keyframes. I may have set of a bug.
action done:
as I was thinking for a solution I thought of a way to fade out the overlaying divs. as you stated in your reply: hide the divs will allow the underlaying elements to be clicked. only these set keyframes to make it animate where working in the beginning. once I changed one symbol(short ani with color change) in the timeline adress_00, the keyframes where skipped or not showing. I even think jumped forward. Not in hype itself but when previewing in a browser.
hope this is enough to reproduce.
UPDATE:
With this problem I find it hard to continue working and/or use the hype file and thus have to timemachine back to a prior saved version.
I do not know where there's a state that hovers are not working to reproduce your issue. Here's what I'm doing:
Downloaded "900x500_Offices_test3.zip" example since I assume the later one is the one with the problems
Preview in browser
Hover over Frankfurt, notice this is working fine
Click on Frankfurt, this brings up the above dialog
Hover over all the white rectangle groups, see that they turn to black correctly
Click the close button
See the map, and can repeat steps 4-7 without issue.
If you can provide steps like this, it will help for seeing where you cannot hover.
Are you talking about in the Hype app/editor and not hover issues in the export? If so, I'd just make sure your playhead is over the area where the "Map" group is set to display:hidden or temporarily use the visibility toggles to hide groups above.
Animating the z-index has been a long standing request. While you can't do it now (and I'm not even sure what a good UI would be like!), you can use javascript API that applies in the export like:
