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:
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.
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?
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 …)
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:
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.
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.
↑ 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
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?
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
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?