Hype Filter Effects Enabler (based on SVG-Filter)


(Loves Hype) #1

Animated preview here

HypeSquiggleEnabler is based on SVG-filter and uses some classes to apply the effect to specific elements. It comes in handy if you want to create that hand drawn animation look. You can add the effect to any element through applying the class hypeSquiggle and modify it’s speed with squiggleMedium or squiggleSlow (Default is squiggleFast). If you got two squiggles with the same speed and it seems too synchronized you can offset one squiggle animation by adding squiggleOffset (applies negative animation delay). This effect could also be described as a jitter or wobble (for searches).

Instruction:

  • Add the enabler to your project
  • To apply a squiggle use a ‘Class Name’ in the form of hypeSquiggle
  • Select the ‘Identity’ tab on the 'Inspector’panel.
  • Enter class and options in the field ‘Class Name’ (for example hypeSquiggle squiggleMedium )

Note:

Most browser fully support SVG-filter (Info: https://caniuse.com/#search=svg%20filter), Hype 4 Example requires Beta-Access but is the same code. But the only difference is that it demos the Vector Pen Tool.

Example Downloads:

Hype 3:
HypeSquiggleEnabler 1.1

Hype 4 with Vector Pen Tool (currently requires Beta-Access) :
HypeSquiggleEnabler 1.1

Versionhistory:
1.0 Initial release as symbol and under MIT-license
1.1 Symbol now make sure it is hidden after enabling the effect

Further effects:
hypeNoodle, hypeSplash, hypeGooey


(Loves Hype) #2

Potentially there is a whole world of effects that can be done with this technic. Get started here for more insight …

Great read on the subject matter

Source of article


(Loves Hype) #3

Hype NoodleEnabler

Another enabler but this will quickly become old if I open a new thread for every effect. So this is just thrown in here. Look at the original post to see how to use this. Noddles is probably the wrong word and it’s more a bevel style effect. The class for this effect is called hypeNoodle.

Example Download:

Hype 4 with Vector Pen Tool (currently requires Beta-Access) :
HypeNoodleEnabler 1.2

Versionhistory:
1.0 Initial release as symbol and under MIT-license
1.1 Symbol now make sure it is hidden after enabling the effect
1.2 Fixed error in effect scope and now it combines well


(Nick ) #4

This is really neat but I am lacking an understanding of how you actually build an enabler in Hype.
or do you build it in a text editor and then…???
I saw that it is a Symbol but cannot decipher the steps to create new ones in Hype.


(Loves Hype) #5

In the symbol is a code block. The layer is called “Code”.


(Rick) #6

Don’t forget to unlock the lock…
:kissing:


(Loves Hype) #7

The lock is in place so people don’t accidentally delete the code. Also if you make a new effect / enabler please duplicate the symbol before renaming it as Hype keeps track of symbols by an hidden ID and would think that a symbol exists already even though it has a new name. This is important if you want to use multiple effects / enabler in one document. Please post new effects (or at least link them) in this thread if possible. Also it would be great to have a little gallery of effects / enabler. If enough effects are added I’ll rename the thread. At least post them in the extension category.

Please also download at least the version 1.1 as a template as it has code to hide itself on export.


(Loves Hype) #8

Hype SplashEnabler

This effect looks like water and to edit the colors you must edit the code in the enabler (Code-Layer). Look at the original post to see how to use this. The class for this effect is called hypeSplash.

Example Download:

Hype 4 with Vector Pen Tool (currently requires Beta-Access) :
HypeSplashEnabler 1.0

Versionhistory:
1.0 Initial release as symbol and under MIT-license


(Loves Hype) #9

Hype GooeyEnabler

This effect creates a gooey mass and looks best on same color objects. It can get your fan to spin up if used too extensively. Look at the original post to see how to use this. The class for this effect is called hypeGooey. If you want to combine objects of different colors please use the class hypeGooeyBlur. But be aware that fine print is blurred in that case. A workaround could be to just mirror the animations outside the goo container if you need multiple colors and fine print (letters etc.). The effect is based on work by Lucas Bebber and some examples and inspirations what can be done with this can be found here.

Animated preview here.

Example with hypeGooey

Example with hypeGooeyBlur

Example Download:

Hype 3 Example :
HypeGooeyEnabler 1.0

Versionhistory:
1.0 Initial release as symbol and under MIT-license


(Pete) #10

the download seems to be broken?


(Loves Hype) #12

Oh! I deleted my previous answer by accident. The download link is fixed!

The gooey enabler example is in Hype 3 but the gooey effect should be really great with the new vector tool in Hype 4. One could create some nice springy blobs and shapes with animated vector paths in Hype 4 combined with the gooey effect enabler.

By the way… the effects combine well (sometimes you need to group them in the order you want the effects applied but apart of that it works).

hypeNoodle and hypeGooey together.


(Loves Hype) #13

I found this really great link if you want to have a visual GUI to build filter https://svgfilters.com/


(Loves Hype) #14

Playing around with these is fun … using two hypeNoodles


#15

I think this is awesome :+1:


(Nick ) #16

Thanks! Now I can see it.


(Hans-Gerd Claßen) #17

Hi Max, there’s a small issue with hype filters and their reset. Once you’ve applied a filter in hype and then set it back (let’s say: first applied blur 10 to the group and then set it to zero again) hype applies a style filter: none … so you may use the CSS ! important rule or whatever your creative workaround will be :slight_smile:

have a nice day!


(Loves Hype) #18

Hype PencilEnabler (Beta)

This effect emulates a pencil. It includes a bunch of filters from 8H to 8B. It’s still in beta and needs some optimization. It’s the first filter using a filter factory to reduce code size. Filtersettings are ruffly based on an inkscape document (involved a lot of DIFF/searching).

Example Download:

Hype 4 Example (requires Beta access) :
HypePencilEnabler 1.0 (Beta)

Versionhistory:
1.0 Initial release as symbol and under MIT-license


(Loves Hype) #19

I found this little live preview tool of the SVG displacement filter.


(Loves Hype) #20

One reason why this is stagnating a bit is that to properly have effect factories without calling functions one would need a way to set parameters on an element/symbol … I am really hoping that the data-attribute panel is coming soon!


(David Duncan) #21

All of this stuff is really cool! I don’t mess with code much, but this makes me really curious.