Can I animate svg paths with gsap?

[Pollux Septimus 7 Likes (Newbie)]

Hello,

I have those svgs and I was wondering if I could animate their path to creating a sort of morph effect. 

 

If yes, how could go about selecting the `viewBox` and the `d` element from the svgs?

 

top:
<svg id="navBg" height="100%" width="100%" viewBox="0 0 1920 0" preserveAspectRatio="none">
	<path class="navBg" d="0" fill="#3E46FD"/>
</svg>


middle:
<svg id="navBg" height="100%" width="100%" viewBox="0 0 1920 1080" preserveAspectRatio="none">
	<path class="navBg" d="M0,0L0,382.767C0,382.767 1497.67,969.894 1920,382.767L1920,0L0,0Z" fill="#3E46FD"/>
</svg>


bottom:
<svg id="navBg" height="100%" width="100%" viewBox="0 0 1920 1080" preserveAspectRatio="none">
	<path class="navBg" d="0" fill="#3E46FD"/>
</svg>

 

[GreenSock 18,587 Likes (Superhero)]

@Pollux Septimus you can definitely use MorphSVGPlugin to animate the "d" attribute of <path> elements even if they don't have the same number of points. That's a membership benefit of Club GreenSock. But it looks like your top/bottom paths actually have no data at all (d="0") which seems a bit odd to me. Is that intentional? 

 

And yes, you can animate the viewBox attribute if you need to as well. GSAP can animate pretty much anything. 

 

A minimal demo will go a LONG way toward getting you a solid answer around here. A simple CodePen would be ideal. Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

[Carl 11,170 Likes (Superhero)]

Yes, a minimal demo is always a big help, but these 2 demos should get you a little closer

 

Path

See the Pen gOvWdGy by snorkltv (@snorkltv) on CodePen

 

viewBox

See the Pen xxjqEvj by snorkltv (@snorkltv) on CodePen

 

They are from my SVG Animation with GreenSock course which has over 30 lessons to help you understand how to design svgs, hand-code them, and animate them. 

 

[Pollux Septimus 7 Likes (Newbie)]

@GreenSock Hi, 

Sorry for the delayed response, I was busy with work. 

Here is the minimal demo you asked for: https://codesandbox.io/s/compassionate-microservice-7u6vv3?file=/src/App.js.

 

I was curious if I could replace the background with an svg and animate its path so that when it changes position from y-100 to y0 but the bottom of the "square" warps downwards a bit.

I guess @Carl answered my question with some pretty good examples. 
Thank you very much!

[PointC 14,428 Likes (Superhero)]

This thread would probably be helpful for you:

 

[Pollux Septimus 7 Likes (Newbie)]

This is awesome! I will take a look. Thank you!