Jump to content


How to get intermediate values from morphSVG tween

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I want to get access to intermediate tween values when using morphSVG without actually animating anything.
Is this possible? I tried something like this but it doesn't work.


See the Pen NyYgXo?editors=0012 by asistapl (@asistapl) on CodePen

Link to comment
Share on other sites

Here is how you can get it. The SVG path that you see is only updated externally using retrieved values.


See the Pen WMzdGb?editors=0010 by Sahil89 (@Sahil89) on CodePen


In case you don't want to create element. Another method I tried was using modifiers plugin it works but only if both paths have same number of points, I guess while working with svg element @GreenSock does some additional calculations.


See the Pen bLvaYd?editors=0010 by Sahil89 (@Sahil89) on CodePen


  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thank you very much Sahil! Great solutions.
For now I'll try to implement something like this:

const obj = {
  d: "M1000,30.1V158H0V0c169.7,238.5,374.3-76,502.6,106.8C615.7,268.2,759.9-15.4,1000,30.1z"

TweenMax.to(obj, 1, {
  d: "M1000,157v1H0v-1h502.6H1000z",
  onUpdate: (v) => console.log(obj.d)

It works great.
I have relatively simple shapes to morph so I think I can make some modifications in Illustrator and use d attribute.
For more complex paths I will use your first solution.

Thanks, have a great day!

  • Like 2
Link to comment
Share on other sites

Yep, just to be clear, MorphSVGPlugin was built for SVG and it automatically does a bunch of work to subdivide and make sure the number of points match and that the shapeIndex is the most intuitive (how the shapes morph...like the order of the points). So if you're just animating a plain string, GSAP can of course do that (isolating each number in the string and interpolating between corresponding positions), but you lose out on the 2 magic pieces (matching point quantities and re-ordering the points so that the shapes morph in the most intuitive way). 


Does that help? 

  • Like 3
Link to comment
Share on other sites

Thanks, I was aware that plugin makes much more than just interpolation of values when tweening "d" attribute.
Videos on your youtube channel explained that well :)


  • Like 1
Link to comment
Share on other sites

This thread on canvas morphing reveals some hidden tricks about the MorphSVGPlugin :o



  • Like 3
  • Thanks 1
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.