SVG wave animation

[marosko]

On 2/25/2018 at 10:11 AM, OSUblake said:

I added an option to show the points in case it's not clear what's going on. Each point is animated between the minRadius and maxRadius at a certain angle. And on every update, the catmull-rom/cardinal function creates a smooth path between all the points in a blob.

 

 

 

Hey, thanks for great demo @OSUblake, however it's somehow possible to change minRadius/maxRadius dynamically? How I scroll, I want to have "bigger" vawes but if I call createBlob with different setup on scrollChange it rerenders whole "blob" and it's not smooth...

 

Thank you

See the Pen vdzjyg by osublake (@osublake) on CodePen

[OSUblake]

7 hours ago, marosko said:

if I call createBlob with different setup on scrollChange it rerenders whole "blob" and it's not smooth...

Yeah, that's probably the worst thing you could do.

 

Why don't you convert that demo over to gsap 3, research how to scale a vector, and then I can provide more guidance.

 

For reference, this is the vector that we want to scale.

var point = {
  x: options.centerX + Math.cos(angle) * options.minRadius,
  y: options.centerY + Math.sin(angle) * options.minRadius
};   

 

 

[marosko]

@OSUblake Thank you for your response. I already have it in GSAP 3 with scrollTrigger where I always recreate blobs in onUpdate event (what is wrong), because I don't know, how to hook to existing "point" of blob that you mention.

 

I dont know if I understand what you mean, but I dont want to scale up whole circle, I just need to change x/y value of point always when onUpdate in scrollTrigger is fired. 

 

Here is what I have, you will see when you scroll:

https://jsfiddle.net/marosko/hgyf0u6s/21/

[OSUblake]

I'll check your demo out in a bit, but this is what I meant scaling. It can be used to change the position of something.

 

 

 

[marosko]

Thanks a lot, maybe I am missing something, but I dont understand how it works  I thought it would be easier 😕

[OSUblake]

18 hours ago, marosko said:

I thought it would be easier 😕

 

Definitely not easy. Something like this is definitely a good use case for some gsap utils like interpolate and mapRange.

 

An example of how the points could be setup and then modified in the update function.

 

See the Pen 2ed6786c0e21107ed101211053db81df by osublake (@osublake) on CodePen