bdrtsky

Take a look at this - https://tympanus.net/codrops/2019/03/12/image-distortion-effects-with-svg-filters/ Pure SVG filters. I believe this is maximum that you can get from SVG. But, to tell the truth effect is not so smooth as with WebGL, and it makes my CPU fry. I wouldn't use it in production.

I appreciate your answers, since I already wanted to add event listener to every child This is much much more elegant solution, very enlightening. I should probably take advice above to spend more time on forum

Cool, thanks! Still I was hoping there could be a way automagically solve this, for the case, where I can't edit data attributes...

This is a joke, right?

I want to start stagger from element under cursor. This doesn't seems to work

Why origin have no effect on this SVG and why findMorphOrigin doesn't work?

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

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

This was the first effect that I made with GSAP as well Youcan check it, it's slightly different, using 3d effect -

Absolutely insane how you can achieve such effects with 5 LOC! I can't believe how I lived without GSAP before.

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.

Is it only me, or it's funny how they allowed super bloated `bodymovin` on this platform? What is this?

Just require it anywhere, it will be registered to window.

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

ScrollMagic is not optimized to work on mobiles. How are you using it there? The good practice is to turn off complex scroll animation on mobile, not the opposite.

A lot of developers and webmasters where very unhappy when this initiative appeared from Google. Now it's Designers/Animators turn. http://ampletter.org

Yep, I also notice artifacts when DevTools is open (especially when Elements tab is open and tweening node is selected or when there's a lot of console logging). And I see no shaking in my Chromium on Ubuntu.

Thank you for a such reasonable approach for licensing. I completely agree with your vision, and want to add, that some Clients could have hard times with managing all this licencing. Especially thanks for clarifying the scenario when Client continue maintaining the website without our help, this certainly should be mention in Contract, that licencing doesn't cover that. Very cool, absolutely love that!

@GreenSock yep, with MorphSVG it works like a breeze. No need to hustle with third-party tooling! I have a question about licensing (can't find related topic on forum). How to handle licensing for the clients in situation when I am agency representative/developer and I need GSAP plugins work on different clients websites. I can't find licensing terms regarding this. Can you please clear this up, so I don't need to create another topic? Or should I better write to support? Thanks!

Found the "solution" using Shapeshifter Now my question is - how to convert path to this format not using online tool? SVGO or something else can do this?

After reading this topic, I assume this happens because Illustrator messed up `path` (even while having same 4 anchors)? Here it says that I need not only same points/anchors, but same sequence, and only thing that could change is numbers. While Illustrator exports absolutely different `d` points.

@Sahil amazing example, amazing video, amazing book! I am shockingly amazed!

Hi! Trying to figure out morphing thing. I made a circle in Illustrator, turned it to the path, then I also made a blob from this circle (with the same 4 anchors). Now I am trying to morph `path` one in another and having this bugs: I am not sure why this happening? How to morph this 2 shapes (w\out using MorphSVG right now, I need to figure this out first).

@PointC tips are brilliant! Thanks so much

By the way, for the future - why my Codepen link didn't embed? I am actively learning GSAP right now, so you might expect a few more questions, if you please ?