Unable to compile tsx file containing DrawSVGPlugin

[hrism]

Nice to meet you.

I registered as a member of Greensock to use DrawSVGPlugin.
So I went to the dashboard and followed the instructions in the "Yarn" section of the "Module Installation Token".
I then read through the DrawSVGPlugin API documentation and added descriptions to my tsx file according to its contents.

However, when I executed the "Yarn start" command, I got the following error, and I am struggling to determine the cause and find a solution.
If you could please advise me, I would appreciate it.

 

From a junior front-end engineer and designer in Japan.

 

import { ReactElement, useEffect } from 'react'
import { gsap } from 'gsap'
const PathAnimation = (): ReactElement => {

    useEffect(() => {
        gsap.registerPlugin(DrawSVGPlugin)
        setAnimation()
    }, [])

    const setAnimation = () => {
        // https://greensock.com/docs/v3/Plugins/DrawSVGPlugin
        //draws all elements with the "draw-me" class applied with staggered start times 0.1 seconds apart
        gsap.from(".draw-me", {
            duration:1,
            stagger: 0.1,
            drawSVG: 0,
        });
    }
    return (
        <>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409 381" className="draw-me">
                <path fill="none" stroke="#000" strokeMiterlimit="10" strokeWidth="11" d="M6 6v200h306V92H181V6h223v272H6v98h401" />
            </svg>
        </>
    )
}


export default PathAnimation

Compiled with problems:X

ERROR in src/components/PathAnimation.tsx:16:13

TS2322: Type 'number' is not assignable to type 'BooleanValue | DrawSVGTarget | undefined'.
    14 |             duration:1,
    15 |             stagger: 0.1,
  > 16 |             drawSVG: 0,
       |             ^^^^^^^
    17 |         });
    18 |     }
    19 |     return (

Uncaught ReferenceError: DrawSVGPlugin is not defined
    at bundle.js:1719:59
    at invokePassiveEffectCreate (bundle.js:40732:24)
    at HTMLUnknownElement.callCallback (bundle.js:21348:18)
    at Object.invokeGuardedCallbackDev (bundle.js:21397:20)
    at invokeGuardedCallback (bundle.js:21457:35)
    at flushPassiveEffectsImpl (bundle.js:40814:13)
    at unstable_runWithPriority (bundle.js:48776:16)
    at runWithPriority$1 (bundle.js:28754:14)
    at flushPassiveEffects (bundle.js:40691:18)
    at bundle.js:40572:15
react-dom.development.js:20085 The above error occurred in the <PathAnimation> component:

    at PathAnimation (http://localhost:3000/gsap-study/static/js/bundle.js:1718:51)
    at div
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
scheduler.development.js:171 Uncaught ReferenceError: DrawSVGPlugin is not defined
    at bundle.js:1719:59
    at invokePassiveEffectCreate (bundle.js:40732:24)
    at HTMLUnknownElement.callCallback (bundle.js:21348:18)
    at Object.invokeGuardedCallbackDev (bundle.js:21397:20)
    at invokeGuardedCallback (bundle.js:21457:35)
    at flushPassiveEffectsImpl (bundle.js:40814:13)
    at unstable_runWithPriority (bundle.js:48776:16)
    at runWithPriority$1 (bundle.js:28754:14)
    at flushPassiveEffects (bundle.js:40691:18)
    at bundle.js:40572:15

PS: I am not a paying member, is it possible that this plugin is only available to paying members in the first place? From my poor English reading and understanding, I was thinking that perhaps even free members can use it based on the regular process....

[Cassie]

Hello there Hrism!

 

Yes - DrawSVG is one of the plugin's that are only available to club GreenSock members.

If you're just experimenting you can use it for free on codepen or codesandbox though.

In terms of your code, you may want to register the plugin outside your useEffect and also move the class to the path instead of the SVG itself.

 

import { ReactElement, useEffect } from 'react'
import { gsap } from 'gsap'
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

gsap.registerPlugin(DrawSVGPlugin);

const PathAnimation = (): ReactElement => {

    useEffect(() => {
      gsap.from(".draw-me", {
            duration:1,
            stagger: 0.1,
            drawSVG: 0,
        });
    }, [])

    return (
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409 381">
                <path className="draw-me" fill="none" stroke="#000" strokeMiterlimit="10" strokeWidth="11" d="M6 6v200h306V92H181V6h223v272H6v98h401" />
            </svg>
    )
}


export default PathAnimation

 

[hrism]

Cassie-san
Thank you for letting me know.
I immediately became a member as you suggested.
I also changed the code to the one you described, and the "Uncaught ReferenceError" on the console is no longer displayed, but the following error has not been resolved.
Is there a lack of description in Interface, etc.?

 

ERROR in src/components/PathAnimation.tsx:13:13
TS2322: Type 'number' is not assignable to type 'BooleanValue | DrawSVGTarget | undefined'.
    11 |             duration: 1,
    12 |             stagger: 0.1,
  > 13 |             drawSVG: 0,
       |             ^^^^^^^
    14 |         });
    15 |     }, [])
    16 |

 

[Cassie]

Ah, thank you so much for your support Hrism!

 

Welcome to club GreenSock. 🥳

Does this demo look the same as your setup?

https://codesandbox.io/s/mystifying-nova-bdvpyx?file=/src/App.js
 

[GreenSock]

You could just make the drawSVG value false or a string like "0% 0%" I can add a number as an acceptable type in the TypeScript definition file for the next release, but that's really just a convenience that means the same thing as the options above.