Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sébastien Gilbert

Animate SVG path attributes

Recommended Posts

Hello, could you please help me to figure out how to animate SVG Path attributes with GSAP 3.  I did attach a GIF, so it would be a bit clearer what I'm trying to achieve.

ScreenFlowAnimatino.gif

See the Pen gOpxbwa by sebastien-gilbert (@sebastien-gilbert) on CodePen

Share this post


Link to post
Share on other sites
2 hours ago, Sébastien Gilbert said:

how to animate SVG Path attributes with GSAP 3

 

Hi @Sébastien Gilbert and welcome to the GreenSock Forums.

 

You can tween the same number of values (this is important) via "attr:{}".

The following link is an older example of this, but still applies to GSAP 3.

See the Pen NbQYzP by asistapl (@asistapl) on CodePen

 

You can also if you prefer use the morpSVG plugin (member benefit) for when you require a differing number of values in your SVG shapes.  Here is a thread with an example of that approach.

 

https://greensock.com/forums/topic/21464-multiple-morph-svg/

 

Do those help you?

 

  • Like 5

Share this post


Link to post
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.

×