Quick Summary (so far)
This extension aims at offering clipPath support for vector shapes as long as this isn't supported native. It was inspired by this example and now we should be able to do similar things.
Fallback and API
To support older browsers this extension establishes the following CSS rules if no support is detected: .hideIfClipPathNotSupported and .showIfClipPathNotSupported.
Further more you can use the following call HypeClipPath.supportsClipPath() to see if your browser supports clip path and for example show a different/adjusted scene or run some JavaScript if it doesn't. The function returns a Boolean (true/false).
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)
If you want the old version without animation: HypeClipPath16.js (1.6) 1.7 Using Mutation Observer, debouncing and performance update 1.7.1 fixed Safari update bug 1.7.2 fixed querySelector bug (thanks to michelangelo)
Content Delivery Network (CDN)
Latest version can be linked into your project using the following in the head section of your project:
↑ 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.
↑ 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 . 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).
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!
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.
Example Download: Download removed … is now built in since 1.7
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).
I hope he feels it that way too . 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.
. 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).
