Jump to content
Search Community

MorphSVG - smooth wave creation - possible?

fatSkeeter test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a wave animation that i would like to utilize the MorphSVG plugin for.  I figured that going from a start to finish animation just wont be possible.  So i provided multiple segments of the animation to help FORCE the plugin go a certain direction.


I still cannot get a smooth wave growth from my CODE and not quite understanding what is going wrong with it.


If opening my code on local, the HTML should show a lower brown area that needs have a green wave pattern that grows from the top of the brown area.  There is an opacity to these shapes as well...so to simply shift a green object behind the brown is not possible.  Plus i would like to have a little more life from the GREEN wave formation than a simple slide in.  Also the top of the brown shape is a wave (or curve), that curve line needs to be consistent for the green shape building so as not to separate.


I have tried to use the shapeIndex to find the best possible solution and i still cannot get to a final result that even has minimal issues with playback.


Does any one have any more insight on these type of GSAP plugin animations.  Is it possible to do something this COMPLEX?



See the Pen pgKjyY by anon (@anon) on CodePen

Link to comment
Share on other sites

It might be easier to do this by animating the Bezier points directly. However, it can be hard to animate a Bezier because you can't see the control points. You can convert a Bezier to a catmull-rom spline to make it easier to work with. It's defined by a series of points just like a polyline/polygon. You can see here that the curve goes through all the points.

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


That is how I setup the SVGs in my doodle morpher. If you play around with it, you can see that the effect you are going after is possible using the MorphSVG plugin, you just need the right geometry.

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

  • Like 5
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...