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?
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.
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
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.
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).
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.
Yes, I see that now. The code is from 2019. Seems like something has changed in Safari since then as it worked good on Safari versions from that time. Static masking works … only the mutation observer applying new mask isn't currently picked up by Safari/webkit.
PS: This was one of my first "with Hype IDE preview" projects, and frankly it should be done by Tumult instead of me working around a bunch of obstacles I don't have control over without proper callback support in the WebKit instance and potentially the need to hack into the Runtime (which I could but that would be a custom solution than a generic approach). Still, a project I dearly like, though. But no promises when I and if I will fix it as it was a rather involved "hack".
Update: This seems to be a Safari/Webkit issue related to the other update bug reported a few days ago that an innerHTML update wasn't rendered. If I open the Safari inspector and keep resizing the window I can see the refreshes taking place. Safari/Webkit has changed something fundamental impacting multiple aspects of Hype. I am testing on Big Sur and the latest Safari @jonathan
Hotfix was rather simple (did't do a Safari/webkit scoping, though). There is a bug going around that prevents updates in Safari. I fixed it using this method:
var forceRedraw = function(element){
var disp = element.style.display;
element.style.display = 'none';
var trick = element.offsetHeight;
element.style.display = disp;
};
Just replace the JS file in the example with the hot fix in my latest reply. I’ll update the download in the first post of this thread ASAP but am currently busy. The only thing you need is to assign a class name or id to your mask (vector shape) and then you can assign it to items on the stage by defining data-clip-path with a selector targeting your mask so either by class selector or id selector. Let’s say you used an id called test than the selector would be #test or in case you assigned a class called test the selector would be .test. All the other options are totally optional.
I also replaced it on the server. But you can always just put it in your resources folder and remove the hotlink in Head HTML to my server anyway. Best if you use the minified version in that case. I haven't moved this to GitHub and the JSDelivr CDN so please don't hotlink my server. Only for demos or testing.