Jump to content
Search Community

Assiting with animating harmonic waves, any good practice?

Nemo333 test
Moderator Tag

Recommended Posts

hey guys,
I'm new to GreekSock yesterday I joined the GreenSock club (ShockinglyGreen 😆)
I have stumbled upon Blake nicely written example of a wave:
 



1. Can somebody please explain me what is the meaning of the getRatio function? and the progress(norm * frequency)?

Quote

 point.y = amplitude / 2 * sinus.getRatio(norm);
  TweenMax.to(point, 0.3, { y: -point.y, repeat: -1, yoyo: true }).progress(norm * frequency); 


By the way since I'm using GSAP3, the code breaks. any suggestion how to fix this?

2. Moreover I was wondering what is a good practice to animate a given function, such as: Cos^3(x),
I know i can use the customeEase, but I'd like to animate some other interesting mathematical more complex waves.

Thank you all for the help!
 

 

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

Link to comment
Share on other sites

We simplified things quite a bit in GSAP v3. Here's a fork:

See the Pen MWKxjQZ?editors=00 by GreenSock (@GreenSock) on CodePen

 

The ease is just a regular function, so it'd be sinus(norm) instead of sinus.getRatio(norm).

 

The progress() method lets you skip to a certain place in the animation. So a progress of 0 is the beginning, 0.5 is halfway through, and 1 is the end. 

 

Does that clear things up? 

  • Like 3
Link to comment
Share on other sites

let svg  = document.querySelector("svg"),
    wave = document.querySelector("#wave"),
    width = 800,
    sinus = CustomEase.create("sinus", "M0,0 C0.4,0 0.3,1 0.5,1 0.7,1 0.6,0 1,0"),
    amplitude = 250,
    frequency = 30,
    segments  = 1000,
    interval  = width / segments;

 

Don't ruin my code your commas. 😉 That's what minifiers do.

 

  • Haha 1
Link to comment
Share on other sites

Moreover I had tried to modify the frequency of a wave,
so I have added  a simple range slider to html page and a simple Event Listener:

const range = document.querySelector('.range')
range.addEventListener('input', handleSlider)
let frequency = 50;
function handleSlider (e) {
  frequency =  e.target.value 
  console.log("frequency is "+ frequency);
}

but it seems the frequency new value does not get binded with gsap.to()/progress(),
I couldn't find an example on the web,
probably I'm missing something 😕 , Is there a special way to this in GSAP3 ?

Thank you!

15 hours ago, GreenSock said:

We simplified things quite a bit in GSAP v3. Here's a fork:

 

 

 

The ease is just a regular function, so it'd be sinus(norm) instead of sinus.getRatio(norm).

 

The progress() method lets you skip to a certain place in the animation. So a progress of 0 is the beginning, 0.5 is halfway through, and 1 is the end. 

 

Does that clear things up? 

 

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.
×
×
  • Create New...