How to achieve trendy liquid effect?

[bdrtsky 29 Likes (Newbie)]

I made 2 SVG shapes - first is original text, the second is distorted, kinda liquid text. Now I am trying to morph it, but effect is not natural. 

 

Is there any other, more appropriate way to achieve this (without WebGL stuff)?

 

See the Pen oVZrPK by bdrtsky (@bdrtsky) on CodePen

 

 

See the Pen oVZrPK by bdrtsky (@bdrtsky) on CodePen

[Dipscom 2,815 Likes (Superhero)]

You can always use SVG filter effects as long as you are aware of the performance limitations.

 

https://codepen.io/dipscom/pen/LbGazO

[PointC 8,599 Likes (Superhero)]

Filters are certainly an option. If you want to go with just a morph, I'd probably have three shapes for the morph cycle to make it feel more natural. If you can start with a path and distort it without changing the number of points, that will also help the magic of the morphSVG plugin. That's what I did in this pen:

 

See the Pen yPbYRY by PointC (@PointC) on CodePen

 

You said you didn't want to use WebGL, but Pixi makes a liquid effect pretty easy.

 

See the Pen XBderZ by PointC (@PointC) on CodePen

Hopefully that gives you some ideas. Happy tweening.

 

[bdrtsky 29 Likes (Newbie)]

Thanks for the answers. Probably I wasn't verbose enough, but my liquid effect will be used with mouse move, so I don't need this to be static (as with filters or Pixi), I need letter to be distorted like the're liquid (on mouse move). 

 

I used Envelope from Illustrator to achieve this warped  paths, so I am not sure about points. To do this manually seems a little bit tough.

[PointC 8,599 Likes (Superhero)]

Oh, you could trigger that Pixi displacement on hover.

 

Or did you mean only one letter at a time would animate on mouseenter?

[GreenSock 8,117 Likes (Superhero)]

Just to explain why you were seeing that behavior with MorphSVGPlugin...

 

The main issue is that your starting and ending shapes have different numbers of points - your "liquified" (end) shape had an extra point added to the left side of those letters. MorphSVGPlugin must place a point somewhere and it's really not feasible for it to guess perfectly - it places extra points evenly across all the segments. 

 

The best way to make this look the way you want is to actually add the points yourself to your starting shape where they visually make sense. I forked your codepen and dropped an extra point into the middle of the left side of each of those characters: 

 

See the Pen bfe7cfe548df58a29a7bbdf91308e0c8?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You could do that in Illustrator, or I've got an unreleased tool called PathEditor that lets you edit paths in the browser (and add points by ALT-clicking). That's what I used, and then just copy/pasted the resulting "d" data from the SVG in Dev Tools. 

 

Does that help? 

 

[bdrtsky 29 Likes (Newbie)]

@GreenSock yes, this is looking exactly what I need to achieve! Thanks for pointing in right direction.

 

I am trying now figure out what exactly one point you were talking about and can't really. I opened my SVGs in Illustrator again.

 

Here's initial SVG

 

And here's distorted SVG

 

I see bunch of points, looks like the same amount, but with handles? Or you where't talking about points on every single letter? I don't really understand this Compound Paths work... Super confusing.

 

PathEditor is not available in public?

[bdrtsky 29 Likes (Newbie)]

Pretty sure here I have same anchor amount on S (26 points), but still have weirdness 

 

See the Pen zbwPXM by bdrtsky (@bdrtsky) on CodePen

 

 

[GreenSock 8,117 Likes (Superhero)]

The S doesn't seem to have the same numbers of points. See the attached image - I added pink arrows to ones that look extra to me. 

 

When I add two points in roughly those positions in the starting shape, it seems to work great: 

See the Pen aa4b6e03ee2fd0735a29d2158db02fb8?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And you're correct - PathEditor is not publicly available. It's something I just built for our own use in things like the CustomEase editor. And for the record, you don't need to worry about control points at all - it's just the anchors that matter. If you just call PathEditor.create() on your <path> element (see my pen, there's a commented-out block), you'll see that it highlights it and shows you were all the anchors are (and you can move them around and even add them by ALT-clicking). I don't mind if you use it on codepen, but please don't ask for official support, that's all

 

Does that help? 

 

[CJH87 6 Likes (Newbie)]

As reference, Blotter.js is another option.