Jump to content
GreenSock

bdrtsky

How to achieve trendy liquid effect?

Recommended Posts

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

Link to comment
Share on other sites

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

 

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

  • Like 1
Link to comment
Share on other sites

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.

:)

 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Oh, you could trigger that Pixi displacement on hover.

 

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

  • Like 1
Link to comment
Share on other sites

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: 

 

 

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? 

 

  • Like 4
Link to comment
Share on other sites

@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?

og.png

dist.png

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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. 

s.png

 

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

 

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? 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×