Inspirational article on clip path
1 Like
Feedback:
Hi @h_classen
I found the HypeClipPath.min.js support pinning, but not support path animation, and HypeClipPath-17-beta6 does not support pinning, but support path animation.
Attached document for your comparing.
maskanimation.hype.zip (304.3 KB) maskanimation_min.hype.zip (300.2 KB)
Sounds great.
Hm…
Really great extension!
Hello @MaxZieb,
Are you Hype official guy, I think this is the most useful extension, any plan to upgrade please?
1 Like
No, I am a user like you. I'll take that as a compliment so thank you.
Yes, continued work is planned as soon as I got some time on my hands. Currently I am still very busy with client work.
If your new to the forum consider visiting this thread:
1 Like
Sorry for later response, it is weekend here.
I just found you did lots of extension contribution, and I might study them for days.
Thanks
↑ look at project
1.7 Using Mutation Observer, debouncing and performance update
Update: Finally releasing this.
Lot’s of little fixes and checks. Please try it out. Responsive settings will not be supported in 1.7 as Hype uses a “warped” coordinate system for responsive containers and actually doesn’t return the correct values with getElementProperty. Workaround in a responsive document is to keep your clip path and cliped element in an unscaled container. Pinning is okay. Meaning I would have to get the offset from styles or top/left directly. This will be evaluated and maybe undertaken in 1.8
4 Likes
Really expected!
Just put it the mask and the masked item in an unscaled group (I mean the scale in the needle and pinning section) together for now. That works in most cases. Share your case where that doesn’t solve it. I might never implement it as it requires lot‘s of insights the regular API doesn’t provide. If I review the code necessary I’ll post an update. But no real pressure here on that currently.
Man, this is so cool! We are really excited about it over here at work 
A coworker and I are wondering if it would be possible to add a css property that would blur the edges of the vector shape in order to create a feathered mask like in After Effects?
Do you know if this would be possible?
Thanks for such an amazing script!
If you’re talking about feathered edges. No, they are not possible. There is an approach to mask with an image (but ClipPath is a path approach). One would have to dynamically create canvas images each frame, feather the border on them and use them as alpha masks but that is another project.
The mask approach can be found here:
2 Likes
Thanks Max! This looks really awesome. I apologize for being totally new to this, but would somebody please be able to explain to me how to add the CSS property to an element?
A sample hype file demonstrating this function would be just as useful
Thanks again!
Hi David!
Demo Hype File: Mask_Demo.hype.zip (11.6 KB)
This example is taken from the page that @MaxZieb referenced. The example is near the end of that page.
So in the Head of the Hype document we have:
Note the “#masked” script that leads things off. This scripting references an element with an ID of “masked”.
As per the Demo we will select the blue rectangle and in Hype’s “Identity Inspector” we type in “masked” in the field “Unique Element ID”. Note that we do not use the “#” character when entering the name.
Next preview the Hype document to see the masking.
You can read more about assigning CSS to elements here.
2 Likes
Thank you, Jim! This is fantastic, can’t wait to try it out. Looking forward to using all of this stuff at work
1 Like
Clip-path & Mask
1 Like
The vector tool shape could also be applied to a mask (image). I never expanded or forked this codebase to do so because I haven't seen much usage to begin with. Other things that could be done are shape-outside (also no IE support as always, but that browser is dead to me anyway).
1 Like
Hi.
Where do you explain how to create the vector shape that already shows the masked/visible parts on Hype's stage?
I try to recreate it but the shapes does not mask nothing. I've added the code in the header.
Thank you.
The cat has these HTML attributes:
And the vector shape has the following:
