I’m trying to use Hype Pro as a way to prototype web apps because I love how well it handles animation.
However, in prototyping apps (like Antetype and Axure) I’m used to the concept of reusable ‘widgets’ with the ability to share specific ‘attributes’. For example I might have a list of products all this the same styling and only want the name and image in each instance to change, while the font, and background colour, hover effects, etc… remain the same.
Can this be achieved in through the use of symbols in Hype? Or is updating elements individually the fastest way?
Currently multiple instances of a symbol are exact copies of each other, but they could still be helpful for your prototypes. If you create a symbol with the layout you want you can then duplicate that symbol and modify the image and title in the new duplicate symbol. Unfortunately if you later make edits they will not propagate to the duplicated symbols.
This is something I would like to improve in an update. Thanks for the feedback.
Has there been any improvement here? It looks to me, in your Symbols video on Youtube… that those shirts are symbols with different image content.
But I’m trying to create text symbols now to trigger similar look/feel and behavior, but I want different actual text content. It seems I can’t do this (which, is a bummer, it’s why I just upgraded to Pro just now).
Am I just doing something wrong? Whenever I have text symbols, if I edit the text in one, it changes everywhere.
Thanks! This does help. Appreciate such fast responses.
I come from Sketch where you override properties in a symbol. Really powerful for text symbols because all instances point to the same symbol, but can have different text. Duplicating a Symbol is OK, but if I want to change properties… the changes don’t cascade.
So this helps me trigger Symbol behaviors from the Main Timeline, but I lose the ability to maintain formatting, right?
depending on what you are doing there are probably going to be many ways to go about doing it. It’s difficult to ascertain exactly what you are trying to achieve and therefore give you a specific answer/solution.
You’re mentioning Symbols and the example vid. In the vid, the shirts aren’t the symbols but are inside a symbol that also has (after he converts it) another symbol inside this (the add to cart). The text there does not change so simple copy/paste is fine (many instances of one symbol) but if you wanted to change the text in each then by duplication (3 separate symbols) you could. You would have to duplicate the actions as well, however.
If it were me I would (according to my understanding of what you are likely trying to do) create symbols with the various elements and animations, etc. Create as many instances of those symbols and then using a little Javascript function update the text in those elements based on another factor (perhaps an ID of the parent symbol.
Again, just to point out that I’m suggesting something here that may not be what you want. If you can show a small example or share a doc with what you have already or outlining what you want to do then we can perhaps tailor something towards what you need/want.
I am trying to have several pieces of text show at different times, and run a Javascript-powered animation when they load. (I’m using Greensock’s SplitText to do some cool things).
So, imagine three text blocks in one scene. Each has different text.
1 sec in, one animates. The other two are invisible.
2 sec in, the second animates. Third one is still invisible.
3 sec in, the third one animates.
The animation requires a Javascript function, I can’t just do it using the UI.
A separate issue… each needs to fire a Javascript function that references itself, so that it animates only, say, the h1 inside of it.
