Jump to content
GreenSock

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

Cubic bézier curves smoothing effect

Recommended Posts

I'm trying to create a wave smoothing effect, where I morphSVG 2 paths together if you have scrolled passed a certain point. 

 
How can I make it animate from the bottom only?
 
 
See the issue here during animating between the 2 paths.
post-48492-0-48214500-1480277900_thumb.png

See the Pen QGMVLE by gizmojo (@gizmojo) on CodePen

Link to comment
Share on other sites

I don't quite understand your question or your goal. 

 

Are you saying that you only want the very bottom curve of your white shape to morph (whereas currently the upper right corner also appears to shift)? If so, you can alter the shapeIndex (feel free to use the findShapeIndex() utility, like http://codepen.io/GreenSock/pen/LpxOqR) or you can just make sure that your start/end shapes have the same number of points and that you only move the points along the bottom. Currently, it looks like you've got mis-matching numbers of points, so MorphSVGPlugin must fabricate some points for you. 

Link to comment
Share on other sites

Morphing is good for changing from one shape to another, but a wave is hardly a static shape. It might look better to actually draw a wave without morphing. It's not as hard you may think.

http://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401

 

To animate the wave based on some other factor, like scrolling, you could use the ModifiersPlugin. Check out how I'm animating the strength of the wave from 0 to 1.

See the Pen XNaGzp?editors=0010 by osublake (@osublake) on CodePen

 

.

Link to comment
Share on other sites

Cheers guys I managed to get it working perfect checking I had to same number of points in both paths. 

  • Like 1
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.
×