Jump to content
GreenSock

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

Assiting with animating harmonic waves, any good practice?

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:
 

https://codepen.io/osublake/pen/yakOjY

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!
 

 

Share this post


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

Share this post


Link to post
Share on other sites
1 hour ago, Nemo333 said:

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

 

getRatio, is the easing function. You pass in a value between [0, 1], but that's different for v3.

 

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

 

 

  • Like 4

Share this post


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

Share this post


Link to post
Share on other sites

Thank you for the example and those explanations guys :))
you rock! 🙂
 

Share this post


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

 

Share this post


Link to post
Share on other sites

Not sure how you're trying to do that, but you can't update the frequency without recreating the animation. For it to be dynamic would require some work, like this.

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Hey @Nemo333,

 

An alternative suggestion: waves coded by PEACEPOSTMAN (still old GSAP syntax)

 

See the Pen EmjdEX by mikeK (@mikeK) on CodePen

 

Happy waving ...

Mikel

  • Like 3

Share this post


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.

×