Share Posted March 13, 2017 Hi, I would like to animate two lines as they move as waves. I want something like this, but with the two lines and moving slowly, like the sea. See the Pen EVJGVj by winkerVSbecks (@winkerVSbecks) on CodePen Does anyone know how to do this? Thank you See the Pen 7c235b8b3c2d9bb6cecea6acfff7ff37 by osublake (@osublake) on CodePen Link to comment Share on other sites More sharing options...
Share Posted March 13, 2017 Hi sonder We've had a similar discussion and Blake had a terrific answer here: https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401 I think that should help you. Happy tweening. 3 Link to comment Share on other sites More sharing options...
Author Share Posted March 13, 2017 Hi PointC, Yes, I've read that article before but I don't know how to apply it to my code... I am just starting with Greensock. This is what I have at the moment (JS is the one that you just told me): See the Pen jBwGWY by sonder15478 (@sonder15478) on CodePen Thank you Link to comment Share on other sites More sharing options...
Share Posted March 13, 2017 Hi Sonder, Blake´s wave is a perfect one and super coded. If you want play around with individual waves: See the Pen PpjjXV by mikeK (@mikeK) on CodePen Please feel free to clone the SVG wave, vary color and timing and starting, horizontal and vertical animation and easing Happy tweening 3 Link to comment Share on other sites More sharing options...
Share Posted March 13, 2017 Yes, I've read that article before but I don't know how to apply it to my code... I am just starting with Greensock. If you're just starting with GSAP (& possibly JavaScript?), that pen of Blake's may be a little confusing. mikel has a nice demo for you in his answer and you may also want to look at Dipscom's answer in this thread about animating the points of a SVG. https://greensock.com/forums/topic/15603-getting-control-points-of-a-wave-svg-and-use-it/ Hopefully that helps. Happy tweening. 1 Link to comment Share on other sites More sharing options...
Author Share Posted March 13, 2017 Hi sonder We've had a similar discussion and Blake had a terrific answer here: https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401 I think that should help you. Happy tweening. Hi PointC, I'm actually working with the first code that you suggested me and I am very close to get what I need. There's only one thing left that I am not able to do... Do you know hoy can I modify this wave: See the Pen 7c235b8b3c2d9bb6cecea6acfff7ff37 by osublake (@osublake) on CodePen to look much smaller? The width and height? I would like to look like the image attached... Sorry I'm just learning JS Thank you for your help Link to comment Share on other sites More sharing options...
Share Posted March 13, 2017 You can change the size of the SVG and then adjust the width, amplitude and frequency variables to your liking. Here's a quick fork of Blake's pen with a much smaller wave. See the Pen GWExMG by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 14, 2017 You just saved my day PointC! Thank you very much!! 2 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