Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
peacepostman

SVG wave animation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to post
Share on other sites
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
};   

 

 

  • Like 1
Link to post
Share on other sites

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

Link to post
Share on other sites

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.

 

 

 

Link to post
Share on other sites

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

Link to post
Share on other sites
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

 

Link to post
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.

×