[FEATURE] GSAP MorphSVGPlugin equivalent?

[fnick851]

Is your feature request related to a problem? Please describe. Morphing SVG shapes on the web, without necessarily matching points.

Describe the solution you'd like A GSAP MorphSVGPlugin equivalent but declarative and for React.

Describe alternatives you've considered https://greensock.com/morphsvg/

Additional context N/A

[mattgperry]

We're probably not going to make this specific functionality in the near-term but here's one way you can animate morphing paths in Motion: https://codesandbox.io/s/framer-motion-morphsvg-example-dp7to?file=/src/use-flubber.ts

[fnick851]

@mattgperry Just curious - do you happen to know a "best practice" way to combine the GSAP MorphSVG plugin with Motion, similar to what you did using Flubber?

You can access a demo version of the plugin in one of their Codepens: https://greensock.com/docs/v3/Plugins/MorphSVGPlugin

I'm asking because I think MorphSVG has a better algorithm which gives better interpolation result. But I couldn't find an equivalent interpolate function like Flubber.

[mattgperry]

I don’t know the best practise but you could try doing something like scrubbing the GSAP tween with the output of Framer Motions animate function