Changing quote text to liquid and fill services titles

[Emcom Technology]

Hello everyone,

 

I have a client that is wanting an effect where the quote in the home section in the demo dissolves to liquid and flows down to the service titles.  Would this be possible with GSAP and ScrollTrigger?  They would like to see the flow of the liquid going to the service titles as well, if possible.

 

I did see this previous post about something similar, but it's 5 years old and I'd like to use only GSAP if possible.  It's using Three.js, and I need to technically "jump" over the about section and go to the services section, while still seeing the flow of liquid though.  I don't think I can do that with Three.js since it's separate sections.  I have used SplitText pretty often, but I'm very new to ScrollTrigger.  However, I included it in the demo so you can see with the markers where I'm trying to begin and end the liquid.  It would also be nice if the animation can somehow start after the SplitText animation. But having both there may not be best.

 

 

See the Pen xxXZQNK by mattk1500 (@mattk1500) on CodePen

[OSUblake]

Welcome to the forums @Matt K

 

You could certainly animate something like that with GSAP and ScrollTrigger. Rendering liquid it is a completely different story, and will almost certainly require using some sort of canvas/WebGL renderer like PixiJS or Three.js and probably a physics engine.

 

7 hours ago, Matt K said:

It's using Three.js, and I need to technically "jump" over the about section and go to the services section, while still seeing the flow of liquid though.

 

That's possible. You would just have to move stuff around on the canvas to match the current scroll position, kind of like what is shown here with the orange boxes, which are being rendered in Three.js.

 

See the Pen 874833fdebc032bedd0cf61e9eac3ee9 by ashthornton (@ashthornton) on CodePen

 

[Emcom Technology]

Thank you!  Okay, which do you think of the two would be a better choice for this animation, PixiJS or Three.js?  I've never used PixiJS and I'm a still a beginner with Three.js.  

[OSUblake]

PixiJS is definitely a lot easier to use than three.js, but three.js is more popular so it's easier to get support and find relevant demos for three.js.

 

But as far as liquid goes, that's super complicated, and I would probably try to find a library that specializes in that. Maybe something like this...

 

https://github.com/TheLucifurry/matter-liquid

demo: https://thelucifurry.github.io/matter-liquid/#bodies

 

Liquid is usually just a bunch of particles, which you can of course make bigger to fill in the gaps. Click on the demo to see the underlying particles.

 

https://gamemechanicexplorer.com/#fluid-1

 

[Emcom Technology]

Okay, I think I'll try with three.js and the liquid library.  Thanks for your help!  

 

What about the MotionPathPlugin and DrawSVGPlugin?  I could create the quote text and services titles as SVGs and then with ScrollTrigger run the animation down the page.  I saw these SVG text demos and thought maybe it could work.  The only thing is it wouldn't have the liquid effect, unless I can animate the text to randomly go outside of its border?  Then infinitely loop the random values, but set a range so they don't go to crazy.  Maybe I'm thinking of something like an elastic effect.

 

See the Pen VwZBjRq by cassie-codes (@cassie-codes) on CodePen

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

 

Then with ScrollTrigger run the animation down the page.  On the ScrollTrigger section of the website, in the video near the bottom, at 1:08 it shows an SVG path going down the page.  I tried to find the demo but I can't find it.

 

 

[OSUblake]

Here's the demo.

 

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

 

I guess you could use DrawSVGPlugin to kind of simulate a liquid flowing down. I wonder if @PointC has any ideas on how to simulate a liquid with SVG? It's not too hard to move a portion of a stroke around with the DrawSVGPlugin, the harder part would me making it appear more like a liquid where the head of the stream is thicker and it tapers down towards the end.

 

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

 

 

[Cassie]

Hey there! I'm the one that made that 'swoosh' pen.

Just FYI - I would never recommend to do that on a production site. It's hundreds of divs and really really not performant at all. It was just for fun!

[Cassie]

The only way I can think to simulate liquid with SVG is like the swoosh pen, and yeah - don't do that. 😂 I should really add disclaimers to some of my pens.

Clever us of filters or masking might work? But again, that'll be bad for performance.

[PointC]

7 hours ago, OSUblake said:

I wonder if @PointC has any ideas on how to simulate a liquid with SVG?

Sounds a bit tricky to me. I've done this type of thing a few times in After Effects by clipping the letters and melting them into a puddle and then dripping the result. With that I use some adjustment layers, blurs and other techniques to make it cool. Here's a really quick version to show the basic mechanics with an SVG. 

 

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

 

It's a bit plain but shows the basics. Adding some filters would help, but as @Cassie mentioned, it'll probably perform poorly. You could also add drips or maybe some strokes with drawSVG that flow down to the next section. If you want some drips, I wrote about that here:

 

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

 

One of the demos from that tutorial. 

 

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

 

That's my two cents. Good luck.

[Emcom Technology]

@OSUblake  Yeah,  I also thought maybe with CSS applying a gooey effect similar to one of these, as long as it didn't affect performance.  Maybe combining the SVG and CSS wouldn't affect it?

 

See the Pen xyPGvJ by pgalor (@pgalor) on CodePen

See the Pen zvRzBO by tucsky (@tucsky) on CodePen

See the Pen GzzGpQ by anthesema (@anthesema) on CodePen

See the Pen ggrrxQ by mikel301292 (@mikel301292) on CodePen

 

@Cassie  Oh, okay, Thanks!  Is there a way to utilize SVG and animation without affecting performance?

 

@PointC  Okay, great!  Thanks!  I will read that!

 

[OSUblake]

6 minutes ago, Matt K said:

Yeah,  I also thought maybe with CSS applying a gooey effect similar to one of these, as long as it didn't affect performance.  Maybe combining the SVG and CSS wouldn't affect it?

 

Oh, it will affect performance. How much is anyone's guess until you actually run some tests. And if there is going to be scrolling going on, that's going degrade performance a little bit too.

 

This one seems to perform well, but it's using canvas.

 

See the Pen zvRzBO by tucsky (@tucsky) on CodePen

 

[Emcom Technology]

Okay.  Without having tested yet, do you think the three.js and the liquid library would be best for performance, over this?

[OSUblake]

Oh definitely. Three.js or any WebGL library for that matter will always perform better than SVG. But that comes at the cost of simplicity, as three.js will definitely a lot more code.

[Emcom Technology]

Okay.  With three.js, I'm going to need to have one canvas for both the quote and the titles, right?  

[Cassie]

Well, logically you'll need the canvas to span the entire distance of the animation.

I don't want to understate the difficultly of this challenge though. If you have a client with the budget and you're excited by the challenge then awesome. But personally - If I had this request from a client I'd also be looking to find a simpler solution to propose as an easier/cheaper alternative.

Maybe something like Craig linked to, or if they're just looking to 'tie' the titles together, maybe a motion path spanning the page.

https://nola-stormwater.netlify.app/

Whatever you go with, good luck! I'm fascinated to see the outcome if you go the three.js 'water' route.

[Emcom Technology]

Thanks!  Yes, I agree.  I actually found this library called Blotter.js and it's using a liquid material.  It's a few years old, but they have other great materials as well. I believe it uses three.js too.  I have it applied on my demo, but I would like to adjust the value of the size with the class of quote2.  That way when it's on mobile it will adjust, since it currently isn't responsive.  Then when that solved, I need to figure out if I can alter it with GSAP and scroll it down the page.  Maybe I can assign the whole thing to a variable?  I might need to use this material instead.  

 

Blotter.js Materials

 

[OSUblake]

GSAP can animate the properties of any object, so it's usually best to check out the documentation to see what you can change. Sometimes inspecting an object in the console also helps.

 

 

Just a quick test shows you can animate any of those, but perhaps the library is not designed to be animated because performance is really poor.

 

See the Pen KKXMjXN by GreenSock (@GreenSock) on CodePen

 

[Emcom Technology]

Oh, wow.  Okay, thanks for the help.  I talked to my client and he said maybe we don't the wave part but maybe only the melting effect.