Nemo333 Posted July 23, 2020 Share Posted July 23, 2020 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 More sharing options...
GreenSock Posted July 23, 2020 Share Posted July 23, 2020 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 Link to comment Share on other sites More sharing options...
OSUblake Posted July 23, 2020 Share Posted July 23, 2020 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 Link to comment Share on other sites More sharing options...
OSUblake Posted July 23, 2020 Share Posted July 23, 2020 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 Link to comment Share on other sites More sharing options...
Nemo333 Posted July 24, 2020 Author Share Posted July 24, 2020 Thank you for the example and those explanations guys :)) you rock! 🙂  Link to comment Share on other sites More sharing options...
Nemo333 Posted July 24, 2020 Author Share Posted July 24, 2020 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 More sharing options...
OSUblake Posted July 24, 2020 Share Posted July 24, 2020 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 Link to comment Share on other sites More sharing options...
mikel Posted July 24, 2020 Share Posted July 24, 2020 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 Link to comment Share on other sites More sharing options...
Nemo333 Posted July 25, 2020 Author Share Posted July 25, 2020 Thank you for the help @mikel and @OSUblake , I appreciate it! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now