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

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 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?Â

• 3

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

Â

Â

• 4

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.

Â

• 1

Share on other sites

Thank you for the example and those explanations guys :))
you rock! ðŸ™‚
Â

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')
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 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.

Â

Â

• 4

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

• 3

Share on other sites

Thank you for the help @mikel and @OSUblake , I appreciate it!

• 1

Create an account

Register a new account