http://www.w3schools.com/cssref/pr_pos_clip.asp
I cannot find a way to animating elements clipping.
anyone knows?
Basically I want to animate like this:
This is an animation that i made with Adobe Edge Animate
I cut images piece by piece and animated each piece using Clipping.
I cannot find anyway to do this in Hype 3 pro
You can do it via CSS3 animation in your Head HTML.
<style>
#img {
clip: rect(0px, 173px, 139px, 0px);
-webkit-animation: bounce 1s ;
-moz-animation: bounce 1s ;
animation: bounce 1s ;
}
@-webkit-keyframes bounce {
0% { clip: rect(0px, 173px, 0px, 0px); }
100% { clip: rect(0px, 173px, 139px, 0px); }
}
@keyframes bounce {
0% { clip: rect(0px, 173px, 0px, 0px); }
100% { clip: rect(0px, 173px, 139px, 0px); } }
@-moz-keyframes bounce {
0% { clip: rect(0px, 0px, 139px, 0px); }
100% { clip: rect(0px, 173px, 139px, 0px); }
}
</style>
This will create an animation revealing a image from top to bottom (with dimensions width: 173px and height: 139px)
clipAnimation.mov (65.8 KB)
You can also achieve the same kind of result by using a rectangle with the same colour as the background and animating it’s width / height property together with the origin left / top property.
This will create the same animation as shown below.
So, that means i have to this in code only…?
It is a basic css property, but Hype does not support…
What a surprise.
Anyway
I need to hook it up to Timeline
When scrubbing a slide bar,that is hooked up with Timeline api, it should animate along the timeline.
Just like playing and stopping a video
Can it be done?
first of all I wouldn't call this a basic property of CSS and secondly it is deprecated in favour of the clip-path (look it up in google)
In my opinion Hype is beating Edge Animate in so many ways right now. One of them being price and I wouldn't expect them to cater to my every whim but hey that's just me. 
The second part of my previous post has a suggestion that you can do this in Hype using rectangles and animating their properties so this doesn't have to be done in code only. (masking)
Back to the CSS, you can make the animation duration the same length as your timeline if you wish it to run the same amount of time
As for scrubbing effect I would code this in javascript using CSS classes to start and stop the animations
and Finally you could always request this as a feature through the right channels (i.e Feature Requests Category)
No... The background will not be a solid colour. Other elements, even Video background , will be animated at the back as well.
Does not matter for me whether one tool is better than the others. I really need one that can be adopted to my project.
And it seems there is none so far. 
I maybe overrated HTML5 animation tools.
i will be still trying anyway. Thanks.
The rectangle is used as a mask NOT the background. Please read my post carefully!!
You MASK the background with a rectangle or whatever shape you want and then you animate that to "reveal" the background.
I gave you the way.
Also look here for posts that suggest SVG images and animation you may find something. Sorry I could not be of more help.
Thanks for your help, as always @DBear
I think you are confusing me or I am.
you were suggesting layiing another element over the artwork.
Although it could be accepted as Masking, it is technically fairly different from MASKING in the way we do when making graphical design , isn't it?
it's more like Layer Clipping in Photoshop.
and
Clipping is also somewhat similar to Masking, but there are limitations.
Half tranceparency should be involved in Masking as well as changing the shape of Mask.
I tried this before posting this question: Masking Elements by using Content Overflow & Groups
but it cannot be doen in Hype when i try to reveal it from the bottom to top OR little more coplecated animating - for example, grouping other two groups and animating them each way.
Because Hype also animate their origins as well.
And an Undo makes the whole layout scattered which is frustrating.
speaking of masking, I would not have done cutting the artwork piece by piece if the shape of Mask could be animated.
Retangular shaped clipping were an alternative way in the first place for me.
I said 'basic property' because i thought CSS clipping property is done only in ractangular shape- mush simpler than a bezier path or mask. I could be wrong.
anyway, I made more videos quickly.
the yellow ribbons consist of 5 pieces and each piece is animated by clipping in a retangular shape.
I did the samy approch to the roads.
I also simply applied Easing.
No coding involved at all.
The whole animation going to be much longer in my project.
since now it is clear Hype does not support animating Clipping property, I think It would be a fair Feature Request I think.
for now I need to find a way to do it in JS and hooking it up with the timeline api. problem is... I don't know about javascript.
I wasn't being technical .... I was simply using the word as it is meant to be used.
If we want to be picky ..... Hype does "support" the animating of the clipping property by allowing you to use CSS and Javascript within the program. What they don't do (at the moment) is allow for it to be as easy as checking a box, or moving a slider. This is why I suggested a feature request through the proper way.
Maybe I shouldn't of, but I took offence at the previous remarks of
and for that I am sorry. But for a program that costs what it does compared to a program that costs $50 a month, with a huge company behind it (no offence to the team here at Tumult), I am very pleased as to what it can do so far and am very happy with it.
If you request it I'm sure they will consider it a future option but for something like the clip animation (especially when the declaration is deprecated in favour of the clip-path) I think it will be difficult to implement. I may be wrong.
As for a previous post where I mentioned using SVG. This might be something you can look into as you can animate the actual paths.
Other than that I have nothing else to offer
If I did, I am sorry.
I shouldn't have. Emotional expression is a bit hard for me.
I only wrote it as disapointment.
you are not wrong. As a developer myself, I can say nothing is easy. actually, web browsers have been impoved over 20 years by many people. Who can say it's easy.
Sorry I should have chosen a word or senctence more carefully.
Maybe my expectation was a little higher when looking at what it is capable of--phisics,responsive design and more. Clipping seemed simpler to me.
If I were good at web coding, I would not have considered using this kind of tools at first.
but now I admit I have to 'get my hands dirty with code'. -that expression is from Tumult Hype team, no offense.
You can do the in Hype by grouping the element. Set the overflow hidden for the group and animate the height and width. The group now works as a mask. You can also animate the position of element(s) within the group.
@jangeltun this is right, however in my tests, if you move the group/mask, it works well only from left >right or from top >bottom. I suppose depends on the Absolute Coordinates 0,0. located at the left-top side of the scene.
As I mentioned
It's a totally different story when you reveal the element like in the video i posted. Especially, bottom to top or right to left. there are more complecated ways- grouping elements
Sadly, we cannot do it without code in Hype 3 pro.
What is worse, the origins of elements change unexpectedly as well
the ultimate way would be to support masking images with a shape which can be animated. meanwhile, I thought clipping would be an alternetive.