Use GSAP's MorphSVG with Motion.page Today! 🔥

Hello guys, welcome back to the channel. My name is Luke, and in today’s video, I want to show you something that a lot of people might have missed with one of our releases. As you can see, back in April of this year, we released 2.1.8 and we actually introduced the MorphSVG plugin, which is for Club GreenSock members only. We’ve integrated it with Motion Page, and I wanted to show you an example of how we can use MorphSVG in today’s video.

Here’s GreenSock’s website talking about the MorphSVG plugin and feature. It tells you how you can get started with it, but since we’ve implemented it into Motion Page, we don’t need to register the plugin. An example of MorphSVG is right here. As you can see, this SVG is morphing from a circle to a hippo. The way this works is it reads the path data in the SVGs and morphs those path coordinates into one another. In this example, the MorphSVG plugin finds the path with the ID of circle and the path with ID of hippo, then it automatically figures out how to add enough points to the circle to get a super smooth morph.

Here is a very basic example. First, we have an ID here, this is what we’re going to target, how we normally would target an element in Motion Page, and then we’re going to use the custom code box to basically add just this. Here we’ll have our original element and then we’ll use the custom code box to morph into our target path. It might sound confusing, but when I open Motion Page, you’ll see how this is done, and it’s actually very simple.

For demonstration purposes, I’m just going to use this SVG code from the GreenSock website. I’m going to use Bricks Builder to do this example today. Let’s go to the HTML, and I’m going to copy and paste all of this here, but I’ll copy only up to the SVG because I don’t need this button here. I’ll paste it into a code block in Bricks Builder. What I’ve done already is I’ve added two sections to this page, and each section’s container has a height of 100 viewport height just so we have some room to scroll. Then I’m going to add a third section in the middle. In this container, I’m going to do our code block, and in here, just do content and paste the code from GreenSock’s website. As you can see, we have this huge hippo here.

I will also need to copy some CSS, but I don’t need the play because this is related to the play button. I’m just going to copy and paste everything else here except for body. So SVG and the hippo. Let’s add some styles. When I paste the CSS, the hippopotamus will be hidden because hippo has visibility set to hidden. From the start, we don’t want to see it; we only want to see the first SVG, which is the circle here. The circle has an ID of circle, and the hippo has an ID of hippo.

The way this works is we have an SVG tag, and inside that, we have two paths. The first path is the circle, and the second path is the hippo, which we want to morph into. It’s important that these have IDs or classes. I’m going to save this and open up Motion Page.

I’m going to create a new timeline and call it MorphSVG. Let’s target our MorphSVG page that I just created with the hippo. Remember what we need to target first, and I’ll use page load for demonstration purposes. First, I’ll need to target the first path, which has an ID of circle. Type circle, press enter, and it’s highlighted, which is good. Now we want to morph this into our target path. Go to custom, click this box to add custom code, and paste the MorphSVG code. In Motion Page, you can see it morphing into our second path, which has the ID of hippo.

Now, I’ll show you a second example using custom SVGs. I’m going to delete the SVG code and keep the setup the same. I’m going to find an SVG of a thumbs up and morph it into an SVG of a thumbs down. Since I’m a member of flaticon.com, I’ll grab some SVG code and paste it in.

I’ve found an SVG for a thumbs down, but first, I want it to go from a thumbs up. I’ve found a similar SVG of a thumbs up and pasted it above. We have two SVGs, a thumbs up and a thumbs down. We only need the SVG tag once, so I’ll delete the extra and clean up the code. The most important parts are the paths. I’m going to give these paths a class: thumb1 for thumbs up and thumb2 for thumbs down.

In the CSS, I’ll hide the thumbs down paths. We’ve given the paths a class, and that’s all we need to animate in Motion Page. Save the page and go back to Motion Page. Refresh, and you see our thumbs up. Edit the target to thumb1 and morph it to thumb2. Play the timeline and see the effect.

You can apply this to a scroll trigger as well. Change from page load to scroll trigger, and as you scroll down, the effect takes place. Lock it to the scroll bar for a smooth effect. You can adjust the settings, like the ease and delay, to get the desired effect.

Save the timeline and check it on the front end. As you scroll down, you get this nice morphing effect. Adjust the settings as needed for the desired effect.

I hope you liked this tutorial. We now have MorphSVG included with Motion Page. This simple tutorial should help you get started with morphing your SVGs. Please consider subscribing to the channel and give us a thumbs up on this video. It really helps us out. I’ll see you again in another video very soon. Thank you very much.