sharing a hypefile saves you and helpers time 
in your example the scriptfile is not even loaded ...
You'll need to drag the .js file into your resource library (in Hype). This will automatically load it in the head and make its functions available to the Hype document. This will in turn export it into your resources folder when you create an export.
2 Likes
What @h_classen and @Daniel said 
. My guess is you are adding it later to the exported file… you need to add it to resources inspector and make sure to enable 
include in <head> document
Hope this solves it for you and others:
example.hype.zip (231,6 KB)
1 Like
WebKit still has some live preview issues while editing in the IDE. I guess we need to sprinkle in some more forced redraw updates. Rendering seems fine, though. Really strange.
What did Apple change @jonathan?
It's because you didn't explain it.
Yes but you guys developers you always explain 50% of the steps. There are many designers who are not coders but they are using Hype for a lot of things. We know how to add/edit but to write code from scratch we don't know.
2 Likes
Thank you!
It works in Chrome. Strange bug in Safari.
I add my test file.
Animated_mask.hype.zip (130.4 KB)
It looks like webkit has problems rendering it properly on the accelerated GPU path.
If you uncheck "Use WebKit Graphics Acceleration" in the Document Inspector it will work correctly as far as I can tell.
(I've made a note to look into this and file a bug against WebKit -- as any future built-in solution to Hype will want it rendering correctly on this faster path.)
4 Likes
Yes, it will work if uncheck "Use WebKit Graphics Acceleration" in the Document Inspector.
but the animation path seems not exactly in the vector fields or scope, please check the screenshot:
I used the latest version of HypeClipPath.min.js
PS:
Sorry, it works, maybe safari cache interfere....
1 Like
FYI I filed the issue here:
https://bugs.webkit.org/show_bug.cgi?id=221788
From the investigation it looks like unchecking Use WebKit graphics acceleration may not fully fix the problem, so @alexlii you may have been seeing a legitimate issue at that time.
(It is promising that they responded so quickly to the bug)
2 Likes
Put the code now on GitHub including CDN support
3 Likes
Hype ClipPath works very well!! @MaxZieb thanks
I have never had any problems and I have tested it on many browsers, even on android.
Now I'm trying to use it with video (autoplay without audio), just that one is missing!
4 Likes
Were you able to get the video working?
it works with static shape, in morphing the video is not fluid but I think it also depends on the video format, I have to do more tests
this is a similar elementor plugin Masked Video for Elementor - Elementor Widgets
Wow, that is the trick, and pin is working in this way.
1 Like