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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×