Hype ClipPath (for the Vector-Tool)

Man, this is so cool! We are really excited about it over here at work :slight_smile: 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 :grinning:

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:
maskCode

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.

maskedID


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 :grinning:

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

@MaxZieb I used it. It is great!

2 Likes

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:

Screen Shot 2021-01-20 at 3.05.31 PM

And the vector shape has the following:
Screen Shot 2021-01-20 at 3.05.55 PM

Thank you.
How a designer could figure out that? :wink:

It works well, on Chrome, but not on Safari.

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;
};

Source: https://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac

HypeClipPath_HotFixSafari.zip (9,6 KB)

v1.7.1 fixed Safari update bug
Example hasn't been updated yet. Please test.

Ah, my training is now and starts at 9:00 and I wanted to show your method… :wink:

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.

But I followed the instructions and this export that works in Chrome (but not in Safari)


does not have your JS file because it is hosted on your site.

Here's the folder

bm-capture- 2021-01-21 à 12.57.49

Do we need to add this code somewhere? It was not explained.

Thank you.

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.

Did this:

Emptied Head:

bm-capture- 2021-01-21 à 18.04.59

Assigned the class to the vector shape:

Assigned the HTML attribute to the image behind:

bm-capture- 2021-01-21 à 18.10.21

Added the new JS in the resources folder:

bm-capture- 2021-01-21 à 18.11.12

What else should be done because I see this?