Hype Clip Path (for the Vector-Tool)

Hi @MaxZieb,

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

I checked every your great work at https://www.hypedocks.com/posterdesign/?utm_source=hypeuniversenews2

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:

https://www.lovcour.com/hypeblendmodes/
https://www.lovcour.com/poster_billie_holiday_downbeat_club_nyc_1947_clippath_fixed_local/
https://www.lovcour.com/poster_fridays_for_future/
https://www.lovcour.com/hypeblendmodes_chair/

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

Have a nice day.

just checked blendmodes …
you may consider to load the extension ‘HypeBlendModes.min.js’ … how should it wok without¿ :wink:

Hello @h_classen,

In this Hype document, the javascript is already referenced by local in resource library:

But I do not know why the javascript file was not downloaded either, please check this screenshot:

online URL is this one:

https://www.lovcour.com/poster_billie_holiday_downbeat_club_nyc_1947_clippath_fixed_local/
What did I miss please?

load the extensions by a scripttag and you should be good to go. what answer do you expect¿

how to use the wordpress-plugin:

Thanks, unfortunately, I still not understand.

I found it will work if the container is set to be with iframe, and these two javscripts file will be downloaded only if it is set to be iframe, please check the screenshot:

For convinient comparing purpose, I put those shortcodes all into one page, and only the first one is set to iframe:

1570160481814

Please check this url:
https://www.lovcour.com/poster_billie_holiday_downbeat_club_nyc_1947_clippath_fixed_local/

You will find only the first one is working.

It would be great if it support Div too, otherwise, all of the animation trigger will not work in iframe mode, this post is for reference:

@MaxZieb, is it possible to support with Div too please?

Thanks

Please just wait for the turtorial and the official 1.7 and your current problem is that the JS file needs to be referenced in your WordPress header. The other option is that the Hype widget can be embedded as an iFrame in the WordPress plugin. This a general thing with additional external resources in Hype on WordPress and there are plenty of threads dealing with that. So this isn’t a particular Hype ClipPath thing.

Thanks for the reply.
So, I am eager for tutorial and version 1.7.:grinning:

Hello @MaxZieb,

Yes, I know that. Actually, both HypeBlendModes and HypeClipPath-17-beta6 will work in IFrame, but all of the triggers of animation will not work in IFrame mode, just as I said in the last post:

I just remember that It is the same situation in this post of the font gradient:

and Font gradient works in DIV mode by input custom CSS in Hype document, is it possible to make both HypeBlendModes and HypeClipPath-17-beta6 work in DIV too by input custom CSS, please?

Thanks and have a nice day.

Hi Max,

i did a short test ( Chrome 77.0.3865.90 (Offizieller Build) (64-Bit)) using physics for the mask and some responsive settings.
i found that the coordinates for the path do no respect the responsive settings …
in conjunction there’s a initially-repeating error in updateClipPath-function (undefined values …)

clipPath_17-beta6_test.hype.zip (583.0 KB)

Sorry but this has probably nothing todo with Hype ClipPath or blendmodes. If you include external scripts to the head section and include it as a DIV the WordPress plugin never included them for you automatically. As you are building a lot of stuff based on the WordPress plugin (it seams) you should familiarize yourself with this fact and stop reporting it as an error. Please search the forum on this. Here is on result to get you started:

Thanks for the report Hans.

It’s true… currently not supporting Hype pinning on the path itself. It has todo with the transfer of transformation data from one coord space to another and having pinnings makes that complicated.

One funny side note to investigate… the transfer of position on the physics engine starts the moment the first collision happens. As I am observing the transform data with a Mutation Observer there seams to be something going on. Seams like rotation is not set and a valid number. That should be fixable. I just added a initial value to rotaion and it is fixed so it’s the case of rotation 0 that needs to be adressed by Hype ClipPath! Thanks!

Little helper: add data-clip-path-visible true to the path (not the target) and it will stay visible. This way you know where the orginal is.

Another thing if you want to be able to add a click zone on the object while leaving it visible. Add a color fill with 0% opacity.

1 Like

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…

:+1:

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

Thanks