Hype ClipPath (for the Vector-Tool)

Quick Summary (so far)
This extension aims at offering clipPath support for vectorshapes as long as this isn’t supported native. It was inspired by this example and now we should be able todo similar things.

Source
HypeClipPath.js
HypeClipPath.min.js

Beta
If you want to help check the latest beta and give me feedback link the file below:
HypeClipPath-17-beta6.js (1.7 Beta 6)

Download Example
HypeClipPath.zip

Demo Example
HypeClipPath.html

Versionhistory
0.9 (Beta) Initial release under MIT-license
1.0 First official release, inverted logic and still a function
1.1 With a little refactoring HTML clipping is supported, limitations apply
1.2 Fixed a bug determining if it's a SVG or Group
1.3 Converted to full extension. Added new methods on hypeDocument
1.4 Added live preview in IDE
1.5 Fixed some preview issues (nudging, delay)
1.6 Fixed some preview issues (zoom)


Hint: While updating I overwrite the above files. So, that should be yet another reason not to hotlink from my server when you deploy into production. Another thing, if you are by accident loading an old version from cache… just add ?VERSIONNUMBER after the url (cache buster).

11 Likes

Max very interesting!
thank you

cool :slight_smile:

Honking%20Horn%20right

Very awesome!

By any chance are you going to make one of those fleeq tutorial videos for this?

↑ look at project
1.0 First official release, inverted logic and still a function

So I inverted the logic. Now objects that want to be masked request a clip path by query. That enables multiple objects to request the same clip path making awesome effects possible. This now should be feature complete to rebuild the source inspiration example (see initial post).

Sure love the idea, but will wait until it’s a done and a proper extension format.

1 Like

Nuts… could have used that 2 months ago. :smiley:

On these Banners where the lines should be pointy (see image):
http://prodeers-lab.com/agencies/zgh_dt/clients/hans/hansm190186/

↑ look at project
1.1 With a little refactoring HTML clipping is supported, limitations apply

Up until now this extension only supported SVG and still makes that distinction.

But now with a little refactoring the clip-path can also be re-used to mask DIV elements. There are some issues to consider as this is another approach that works through CSS and you need to watch borders (for single elements) and bounding boxes (for groups) when publishing for Safari. Apart of that this new feature seams to work fine on Chrome (as always) and Safari.

Next time just contact me… I made online-ads “banners” for 10 years :wink: . BTW that’s how I found Hype as Greensocks (GSAP) was not ideal for designers and the “new” GWD (Beta) was annoying as hell (still is).

We should talk, @MaxZieb. Looking for a 3rd person to Hype around. We also wrote some GSAP but no future in combination with visual kreatives.

This is cool and clever, Thanks! Just wish this was native to Hype one day without writing code that is.

“Native” … is also code :slight_smile:

In the next step this will be wrapped in an extension and offered as minified code that runs on every scene load. Much more can’t be offered at this point. The code then kind of disappears into a modular “Runtime” extension. I wish extensions could have more capabilities in the GUI itself because making them keeps the base runtime slim and one could modularize features. But in this case I would be very surprised if this doesn’t end up in the core GUI and runtime.

The extension at this point only requires to be run on scene load and looks for “[data-clip-path]” (meaning an attribute on the element) containing the classname of the vector tool outline. Simple… no coding required!

2 Likes

Looking forward to it :+1:

1 Like

↑ look at project
1.2 Fixed a bug determining if it's a SVG or Group

Experimenting with polygon sampling and also there is a nice chart from Chris Coyier:

PS: I was playing around with point generation along a path so the next update here will most likely include a polygon option instead of only the #url schema. After that a mutation observed option would be nice to update mask changes hence enabling animated masks. The later is still only an idea.

3 Likes

Example Preview:
HypeClipPath_AnimatedMasks.html

Example Download:
HypeClipPath_AnimatedMasks.hype.zip

Should now also support Adobe Illustrator path objects as mask out of the box. Next up generated Polygone masks and animation on needs basis (hence Hype MutationObserver).

4 Likes

so cool, so modular approach :slight_smile:

all in all you stress @jonathan in a very POSITIVE way :+1:

4 Likes

I hope he feels it that way too :wink:. Much appreciated feedback! I love that Hype offers the flexibility. Now we need that modularity reflected in the IDE and Beginners get the awesome Tumult Introduction with more then enough to learn and use… and Professionals and Companies can build ontop Hype and tweak/extend it to their needs.

1 Like

↑ look at project
1.3 Converted to full extension. Added new methods on hypeDocument