findShapeIndex tool broken using latest GSAP

[Sites Built Fast]

Hi all,

 

We just became ShockinglyGreen, and we're trying to use the findShapeIndex() tool to fine tune an implementation of MorphSVGPlugin, but we're not having any luck due to the following error:

Uncaught TypeError: TweenLite.selector is not a function
    at findShapeIndex (findShapeIndex.js:143)

 

Update 1

Attempting to hack my way through this, I tried:

 

window.TweenLite = window.gsap;
TweenLite.selector = function(element) {
  return element;
};
findShapeIndex(document.getElementById('#shape1'), document.getElementById('#shape2'));

But now I get the following error:

Uncaught TypeError: MorphSVGPlugin.pathDataToRawBezier is not a function
    at findShapeIndex (findShapeIndex.js:150)

It seems like the findShapeIndex tool has not been updated for the latest version(s) of GSAP. Does anyone have an updated version?

See the Pen wvMLMza by openowlnight (@openowlnight) on CodePen

Edited July 29, 2020 by NightOwl
New findings

[ZachSaucier]

Hey NightOwl and welcome to the GreenSock forums. Thanks for being a Club GreenSock member!

 

That's an old v2 version of findShapeIndex. Grab the v3 version here:

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

[Sites Built Fast]

Thank you, Zach! That did the trick!

 

If I could make one suggestion, though: add high z-index at line 69.

 

At first, I thought this version was broken also because I could not click on it. I fixed by adding this.

[Sites Built Fast]

One more question: is there any way to switch the Morph Type for this tool?

[ZachSaucier]

You can add the type:"rotational" to the morphs if you want, sure.