Creative Coding Club

Here's a fun little project for you!

We're going to tap into CustomEase.getSVGData() to render and ease curve to a <path>

Using MorphSVG we can easily animate from one ease curve to another!

These handy demos show each of the 3 steps we'll work through in the video.

Render a Single Ease Curve to a Path

GSAP's CustomEase has a special getSVGData() method that will return the path data of any ease. If you specify a path in the config object the ease will be rendered to that path.

Usage:

let ease = CustomEase.getSVGData("back", {
 width:500,
height:500,    
 path:"#ease"
})

The demo below has an SVG with a single path with an id of "ease".

You can edit the JS code below by changing "back" to "bounce".

Drop-down Menu

Instead of hard-coding which ease we want to render we will grab the name of the ease from the <select> menu.

Animate Curves with MorphSVG

In the next example we'll use CustomEase.getSVGData() to simply return the path data and not render the curve.

We'll pass the path data to a MorphSVG tween so that the curve can animate to the new path values.