All of this stuff is really cool! I don’t mess with code much, but this makes me really curious.
1 Like
One-Line-Metal-Effect.hype.zip (193,3 KB)
This is basically the noodle enabler (slightly tweaked) the experiment was more about using custom stroke-dasharray as the built in one is limited to one digit. This parameter is an array as the name indicates… so you can actually separate the spaces in the dash to match the spaces in between letters given only one line is writing it (look at Head HTML). The metal look could be much improved but that was actually not the goal (but could be an interesting standalone filter if tweaked to a decent state).
There is a slight “snapping” when the line progress hits 100%. Hype does something some reset at the end of the animation even though it’s easeOut … guess that’s still a bug in Hype 4 Beta.
4 Likes
This is really cool! I’m beginning to see where code could come in really handy when used properly. I noticed that snap at the end, and I tried tweaking the animation curve in the downloaded project, but it still snaps…I haven’t encountered this issue yet in my own projects using Hype 4. I hope it’s not a new bug.
This will be fixed for the next beta. A 100% line draw is technically a bit different in that one doesn’t want to supply dash/gap/offset parameters as SVG will render it differently than if all numbers are supplied. The precision in testing if it was at 100% was too low, so the end of a long animation would be at 100% for longer than wanted.
1 Like
I just came across this tool which might help in developing more if you haven’t seen it:
1 Like
Kickstarter Medium Article Effect
Came across this look on a Medium article from Kickstarter. I thought it would be fun to recreate it as an effect. This effects has no particular name as it’s just me playing around with an additional stroke.
Preview Effect:
KickstarterStrokeEffectHype4.html
Download Effect:
KickstarterStrokeEffectHype4.hype.zip
The above link doesn’t seem to work correctly on Safari (12.0.1 on macOS 10.3.6) for me; it mostly appears unanimated. Chrome and Firefox are fine.
Seams to be an issue on all effects. HypePencil etc. is also not rendering correct on Safari. HypeGoo too. I need to fix something there or it’s too early for the pen effects to be deployed to Safari. Suggestions welcome. PS: crazy that this come up now. This means I havn’t been testing them properly on webkit?! but caniuse actually is giving us green light so what am I missing here?!
Very disappointing that Safari is falling so far behind on the latest trends. Still hoping that there is a fix because otherwise this will be shelved for a long time as it can’t go into production.
Update: So it seams Safari can only apply effects to SVG and not DOM nodes. Meaning one could probably fix some of the effects to support Safari but not all of them. When I did a quick fix on one of the effects some strangeness and clipping remains but it might also be fixable … but overall: Safari get you s**t together and play nice with the big boys in town.
1 Like
I also found a fix where if the SVG with the filter effect is defined ahead of everything else (I just plopped it into the head html), then it seems to work more correctly. It has the partial clipping issue I assume you also are seeing.
(I also tried toggling webkit graphics acceleration and css top/left positioning, but those did not have any affect)
Clipping can be fixed with …
width="300%" height="300%" x="-100%" y="-100%" color-interpolation-filters="sRGB"
… on the filter. I updated the last example.
1 Like
Interesting talk about the topic @ dotConferences
PS: I’ll be updating the other filter once I got time. Downside they only work on path instead of the DOM if we include Safari support. Smallest denominator.
1 Like
Hmm… I do see the filter effect at least semi applied to DOM elements when I add div-based elements to the latest version using Safari:
Can you elaborate on the problem?
The effect is only the double stroke (dilate). The drop shadow is done with a regular CSS filter (fully supported by Safari, see group). So we are actually not seeing the SVG filter effect on the DOM-Object.
The following illustrates what this (stroke) effect does: Take a black solid. Dilate the SourceAlpha one pixel and compose it below the SourceGraphic.
<filter id="stroke" width="300%" height="300%" x="-100%" y="-100%" color-interpolation-filters="sRGB">
<feFlood flood-color="black" result="outside-color"></feFlood>
<feMorphology in="SourceAlpha" operator="dilate" radius="1"></feMorphology>
<feComposite in="outside-color" operator="in" result="outside-stroke"></feComposite>
<feMerge>
<feMergeNode in="outside-stroke"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
Ah gotchya, I didn’t look close enough to see that was via CSS filter.
https://codepen.io/alvov/pen/vgLevP
You have thought something of the svg shader…? Ithink it is very big.
1 Like
So great!
Did a short test with all of libraries, and you might like to check the screenshot on Firefox.
Thanks, these are only warnings and as seen on the left the effects are applied. So what do you want me to check. If you want to remove the warnings in Firefox your free to use the code it is under MIT.
Hello Max,
This seems not work on Safari for me, is it possible to fix please? or until safari grade to support?
Not at the moment. Safari is behind on applying these to HTML-groups.
More information on the effect and the problem can be found here: