Hi
I need to display some text inside of a Hype rectangle (Insert: Rectangle) and I’ve set the Content Overflow to hidden. I’d like to animate the text inside of this box so that it starts really big and then shrinks to normal size for readability, but without appearing outside of the rectangle (hence why I set it’s Overflow to hidden).
I can’t seem to figure out how to do this, has anyone made this work?
Thanks in advance,
Rich
Hi @richleach,
You can animate text in a box by animating the inner HTML or just the text specific functions like size. The easy way to do this is to clic record, go to the next moment in the timeline and here you change the size of your text, than move to an other place in the timeline again, and so on …
I hope this explanation is understandable, this might help…Textinbox.hype.zip (17.7 KB)
You can animate text inane way you want, also build it up and make it disappear, change colour etc…
Best, Bas
Bas-
I think we’re close…
What I’d like is to start the animation with the text so large it exceeds the rectangle’s boundary, but is not visible outside of the rectangle, then animate it smaller to where it becomes visible. I may also need to do this with an image as well in the future…
The scene will start with an all white screen (the rectangle’s borders are off and the background is set to None) then the text will come into view and shrink to become readable… Any ideas how I would do this?
Thanks so much for your help with this!
Rich
Maybe this is closer to what you mean…
Textinbox.hype 2.zip (13.2 KB)
The difference is that the box is set on “overflow not visible”
But of course there are many ways to go about making this effect happen…
Bas
You nailed it! Thanks so much I really appreciate it!
Rich
Bas
OK, I see what you did when you set the actual text box’s content overflow to hidden… If I wanted to simply animate one small rectangle inside of another bigger rectangle, then this scenario doesn’t work for me, or at least I can’t figure out how to animate the smaller one inside of it…
Thanks again,
Rich
If you share your document then a specific solution we could give. WOW that was very Yoda, like!
Dear Yoda 
I attached my sample project. Quite simple, a bigger rectangle, background set to none, Content Overflow set to Hidden.
I’d like to move the small box inside of the bigger box so that it appears to be moving inside of the bigger box only. When the small box contacts the side of the bigger box the small box disappears out of the field of view restricted by the bigger box. Sorry that explanation was NOT Yoda like (more like Daffy Duck)
RichsmallBoxInsideBigBoxTest.hype.zip (9.4 KB)
… and thank you for looking at this, I really appreciate your input.
Rich
OK, here’s the easiest way to explain what I’m trying to accomplish: Just like when you look out a window, you can see a plane flying by. But when the plane goes too far, the wall of the house blocks the view and you can’t see the plane anymore. Simple right? I was able to do this with Adobe Edge Animate with just the Content Overflow settings, so I’m obviously missing something here in Hype…
Thanks again,
Rich
@JimScott probably beat me to it. But essentially use a group as the “bigger rectangle” and set that overflow content to hidden. Then anything inside you animate is seen only through that grouping as a kind of viewport. 
Yes, this exactly, thanks so much I really appreciate it!
Rich
Thank you Jim, this is perfect!
Rich
