Jump to content
Search Community

Can I animate svg paths with gsap?

Pollux Septimus test
Moderator Tag

Recommended Posts

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>

 

Link to comment
Share on other sites

@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

  • Like 1
Link to comment
Share on other sites

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. 

 

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

@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! :)

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...