Invalid property morphSVG set to #end Missing plugin?

[NickWoodward]

Just trying to have a play with MorphSVG in Stackblitz using Astro and getting the error that I haven't registered the plugin correctly. I think I have, but may well have missed something. Do I have to do something differently as it's a premium plugin? If anyone has a chance to take a quick look I'd appreciate it!

Thanks

https://stackblitz.com/edit/github-txz3pq?file=src%2Fcomponents%2FMorphTest.tsx,src%2Fpages%2Findex.astro

import { gsap } from 'gsap';
import MorphSVGPlugin from 'gsap/MorphSVGPlugin';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';
gsap.registerPlugin(MorphSVGPlugin);

export const MorphTest = () => {
  const btnRef = useRef<HTMLDivElement>(null);

  const { contextSafe } = useGSAP({ scope: btnRef });

  if (!contextSafe) return;
  const onClick = contextSafe(() => {
    gsap.to('#start', {
      morphSVG: '#end',
    });
  });

  return (
    <div
      ref={btnRef}
      onClick={onClick}
      className="flex w-52 justify-center items-center space-x-3 py-1.5 px-5 bg-slate-200 shadow-lg rounded cursor-pointer"
    >
      <p>ANIMATE</p>
      <MailIcon />
    </div>
  );
};

 

[GreenSock]

MorphSVGPlugin is not in the public/free package - it's only for Club GSAP members ("Premium" and "Business"). You obviously have a Premium membership (thanks!) but you're importing the standard (free) "gsap" NPM package into your demo, so that won't have it. You can use the "gsap-trial" package instead. See https://gsap.com/trial 

 

Also, don't forget to register the useGSAP hook: 

gsap.registerPlugin(useGSAP, MorphSVGPlugin);

 

[NickWoodward]

14 hours ago, GreenSock said:

MorphSVGPlugin is not in the public/free package - it's only for Club GSAP members ("Premium" and "Business"). You obviously have a Premium membership (thanks!) but you're importing the standard (free) "gsap" NPM package into your demo, so that won't have it. You can use the "gsap-trial" package instead. See https://gsap.com/trial 

 

Also, don't forget to register the useGSAP hook: 

gsap.registerPlugin(useGSAP, MorphSVGPlugin);

 

Hi Jack,
Thanks for the reply. I did initially try the gsap-trial package and copied one of those examples (which are awesome btw), but it said I couldn't load ES Modules without adding an already present "type:module" property to my package.json

I've gone back to gsap-trial here: https://stackblitz.com/edit/github-txz3pq?file=src%2Fcomponents%2FMorphTest.tsx if you want to recreate the problem.
Think I've got everything else right? (Although that probably doesn't mean much )

Thanks,
Nick

[Rodrigo]

Hi,

 

This is related to a funky way Astro is handling SSR with React rather than a GSAP related problem. The solution seems to be import the plugin from the dist folder as a default import and not a named import:

import gsap from 'gsap-trial';
import MorphSVGPlugin from 'gsap-trial/dist/MorphSVGPlugin';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';

if (typeof window !== 'undefined') {
  gsap.registerPlugin(useGSAP, MorphSVGPlugin);
}

export const MorphTest = () => {
  const btnRef = useRef<HTMLDivElement>(null);

  const { contextSafe } = useGSAP(() => {
    console.log(MorphSVGPlugin);
  },{ scope: btnRef });

  if (!contextSafe) return;
  const onClick = contextSafe(() => {
    gsap.to('#start', {
      morphSVG: '#end',
    });
  });
  
  return (/* JSX Here */);
};

Here is a fork of your demo:

https://stackblitz.com/edit/github-txz3pq-tycrjg?file=src%2Fcomponents%2FMorphTest.tsx

 

Hopefully this helps.

Happy Tweening!

[NickWoodward]

11 hours ago, Rodrigo said:

Hi,

 

This is related to a funky way Astro is handling SSR with React rather than a GSAP related problem. The solution seems to be import the plugin from the dist folder as a default import and not a named import:

import gsap from 'gsap-trial';
import MorphSVGPlugin from 'gsap-trial/dist/MorphSVGPlugin';
import { useGSAP } from '@gsap/react';
import { useRef } from 'react';

if (typeof window !== 'undefined') {
  gsap.registerPlugin(useGSAP, MorphSVGPlugin);
}

export const MorphTest = () => {
  const btnRef = useRef<HTMLDivElement>(null);

  const { contextSafe } = useGSAP(() => {
    console.log(MorphSVGPlugin);
  },{ scope: btnRef });

  if (!contextSafe) return;
  const onClick = contextSafe(() => {
    gsap.to('#start', {
      morphSVG: '#end',
    });
  });
  
  return (/* JSX Here */);
};

Here is a fork of your demo:

https://stackblitz.com/edit/github-txz3pq-tycrjg?file=src%2Fcomponents%2FMorphTest.tsx

 

Hopefully this helps.

Happy Tweening!

Hi Rodrigo, thanks a lot, that's perfect!