Hype Clip Path (for the Vector-Tool)

no more errormessage :slight_smile:

you’re not observing transform-changes on the path¿ (scale, rotate tested … they’ll partly (scale) applied when changes on the target are made …)

Yes, there was a mixup in the properties tracked. I fixed it Beta 3 soon.

↑ look at beta
1.7 Beta 3

Cleaned up code and consolidated Mutation Observer to always use the [style] attribute for change tracking as it’s done like this in the exported version anyways. Hence reducing branching significantly for the IDE preview.

1 Like

export | animating the clippath: actually the observer observes changes to the target and then updates the clipPath. but if only the clippath is animated the animation is not shown on export …
what is the expected behavior?

Could you send me a demo file. Are you using Hype ClipPath 1.7 Beta 3?

on a new clean setup it works now :slight_smile: sry for the confusion -> love it :slight_smile:

1 Like

↑ look at beta
1.7 Beta 4

Update for beta 5 trials: Some times the coin drops slowly… I just tried tweaking the clip path the user determins (selector) to apply the clipping to the surrounding .HYPE_element_container if it’s not already one of these (like a group). First results are promising and smooth as transformations on the clipped element itself are taken out of consideration and don’t interfer in the IDE anymore. I will test this but it might be the way to go.

↑ look at beta
1.7 Beta 5

As said from this version forward clipping only happens on .HYPE_element_container by the code and allows for complete independence of the target element on transformations of source elements (with groups this was already the case). Also, it eliminates the need to track the style attribute on the target (as these offsets are now irrelevant).
Only thing before making this the official Hype ClipPath 1.7 … is some testing.
Any help welcome.

After making it official I’ll rest on this for some time (need to work, money is still a thing :v:). If I revisit I’ll tackle some known issues. Thumbnails are sometimes off sync. Offset calculation breaks if the mask and the masked are not on the same level (depths). Either I fix the offset calculation or just make this mandatory. Also I got some ideas for nice further enhancements …

BTW great article on investigating performance on animations:

3 Likes

Unbelieveble, really genius!:+1:

↑ look at beta
1.7 Beta 6

I said Beta 5 was the final but I was just thinking about graceful degradation. So in the sense of a complete package Beta 6 now includes ways to detect support and act on that test.

HypeClipPath.supportsClipPath() is a new function that returns a boolean and could be used to select a diffrent scene for a legacy browser.

If support is not detected none of the clip path related code is run in the browser in question. Secondly two CSS rules are generated/activated called .hideIfClipPathNotSupported and .showIfClipPathNotSupported. You can use them to hide and show groups or elements by assigning them in Hype. They force display:none or display:block with !important meaning that you can even hide a fallback layer in Hype (Eye-Symbol) to avoid distraction while editing and it still will follow the rules once published.

1 Like

Can we expect this feature soon please?:grinning:

Thanks

Just use it… it’s there. Use latest beta 6. Will make it the official 1.7 soon (as I need time to update the examples and an explainer movie).

Hi @MaxZieb,

Thanks for your great work.

I tried the demo documents at https://www.hypedocks.com/posterdesign/?utm_source=hypeuniversenews2

And I am trying to load the javascript from local Hype document upon the layout is loaded, and I found it does not work in flexible layout, I am not sure what is wrong with my setting, it would be great if you like to have a check, and here is the document.

Poster_Billie_Holiday_Downbeat_Club_NYC_1947_ClipPath.hype.zip (153.1 KB)

Thanks

@alexlii Thanks for the report. As said please use the latest beta at this point. I’ll be updating soon as mentioned in the previous post. Also you don’t need to embed it as a function and also you tweaked the script tag with a “<!”. This extension just works in referencing it. As said you should maybe wait for the official release soon with the examples and the explainer movie.

Poster_Billie_Holiday_Downbeat_Club_NYC_1947_ClipPath_fixed.hype.zip (229,1 KB)

do not understand exactly since I am native english speaker.

So, it is not support load both HypeBlendModes.min.js and HypeClipPath-17-beta6.js loaded from local Hype document now?

It works you just had the wrong file referenced and also embed into a function.

I added a functioning file in the previous answer, so I really don't understand this question. And if you mean by local, dragging it into your resource library. It does… just download the JS-files and drag them to your resource library. Then you can remove the manual reference currently in the example. This demand manual updates of the files in the resource library down the line.

Poster_Billie_Holiday_Downbeat_Club_NYC_1947_ClipPath_fixed_local.hype.zip (237,9 KB)


oh, I got what you mean by "referenced" now:smiley:

Thanks :+1:

1 Like

Hi @MaxZieb,

I am exited and trying to use it in production, and really thanks.

I checked every your great work at HypeDocks » Posterdesign

I am trying to understand how it works, but still confused by the tricks on how to use it correctly. I found there are always some class name on image/elements:

blendmode-hard-light
blendmode-multiply
and in the document of Poster_Fridays_For_Future, there is even no Class name are set to both images.

I just guess these class name are preset in both Javascript files of HypeClipPath-17-beta6.js and HypeBlendModes.min.js, but not from standard CSS3, since these names seems little different with the ones of CSS3, am I right please?

If yes, but I only found blendmode-multiply in HypeClipPath-17-beta6.js, but not found blendmode-hard-light in both of those two Javascript files.

So, if these blend mode class name are preset, how manny can we use for now please?
Or, is there any preset format to use for the way of define these class names please?

Or, it would be appreciated if there is a tutorial to clarify.

It would be great appreciated, and thanks in advance.

Hello @alexlii, you're mixing two things. Hype Blendmodes and Hype ClipPath are two different projects. Fridays for Futures has it's own thread and only uses Blendmodes. Hype Blendmodes also has it's own thread. Hype ClipPath doesn't include blendmodes at all. Please keep this thread related to Hype ClipPath and also it is still the beta as I said…

Currently, I don't have time so be patient and refrain from using it in production if you don't understand how it works from reading the files or code itself.

2 Likes

Thanks.

Your reply makes me much clear.

I uploaded these projects to my site of Wordpress, but it seems no one works properly.

Here are urls on my site, and you might like to have a check:

By the way, I am using Hype wordpress plugin on our site.

Have a nice day.