jboothe Posted August 28, 2020 Share Posted August 28, 2020 There may be some typings errors with the MorphSVG Plugin when used in Angular 9. When structuring a tween with morphSVG {} object parameters, a type error occurs on the shape parameter (see image). Note, this works fine in CodePen. this.tmax1 = TweenMax.to("#Arm-R_1", { duration: clapDur, morphSVG: { shape: "#Arm-R_2", // <-- shape parameter error origin: "0% 0%, 27% 0%", type: "rotational", shapeIndex: 0, }, ease: "power1.inOut", repeat: 1, repeatDelay: 3, yoyo: true, delay: 0.5, onComplete: this.onComplete1, onStart: this.onStart1, }); Here's the full type error: ERROR in src/app/components/qast-session/fan-stage/fan/fan-sets/yogi/yogi.component.ts:34:9 - error TS2322: Type '{ shape: string; origin: string; type: string; shapeIndex: number; }' is not assignable to type 'SVGPathValue'. Object literal may only specify known properties, and 'shape' does not exist in type 'SVGPathElement'. 34 shape: "#Arm-R_2", ~~~~~~~~~~~~~~~~~ node_modules/gsap/types/morph-svg-plugin.d.ts:4:5 4 morphSVG?: SVGPathValue; ~~~~~~~~ The expected type comes from property 'morphSVG' which is declared here on type 'TweenVars' I can get it work in Angular if I do NOT use a morphSvg parameter object, but I need to pass the additional parameters: this.tmax3 = TweenMax.to("#Arm-R_1", { duration: clapDur, morphSVG: "#Arm-R_2", xPercent: xPct, ease: Power1.easeIn, repeat: -1, yoyo: true, }); Thanks for your assistance in advance. Jeff Boothe Link to comment Share on other sites More sharing options...
GreenSock Posted August 28, 2020 Share Posted August 28, 2020 Thanks for pointing that out. Yeah, I think that's just a TypeScript definitions thing. Try replacing the contents of the gsap/types/morph-svg-plugin.d.ts file with: declare namespace gsap { interface TweenVars { morphSVG?: SVGPathValue | gsap.plugins.MorphSVGVars; } } declare namespace gsap.plugins { interface MorphSVGPlugin extends Plugin { defaultRender?: Function; defaultType?: String; defaultUpdateTarget?: Boolean; /** * Converts SVG shapes into <path>s. * * ```js * MorphSVGPlugin.convertToPath("circle"); * ``` * * @param {DOMTarget} shape * @param {boolean} [swap] * @returns {SVGPathElement[]} The converted paths * @memberof MorphSVGPlugin */ convertToPath(shape: string | SVGPrimitive | (string | SVGPrimitive)[], swap?: boolean): SVGPathElement[]; /** * Converts a rawPath into a string of path data. * * ```js * MorphSVGPlugin.rawPathToString(myRawPath); * ``` * * @param {RawPath} rawPath * @returns {string} The converted path data * @memberof MorphSVGPlugin */ rawPathToString(rawPath: RawPath): string; /** * Converts a string of path data into a RawPath. * * ```js * MorphSVGPlugin.stringToRawPath("M0,0 C100,20 300,50 400,0..."); * ``` * * @param {string} data * @returns {RawPath} The converted RawPath * @memberof MorphSVGPlugin */ stringToRawPath(data: string): RawPath; } interface MorphSVGPluginClass extends MorphSVGPlugin { new(): PluginScope & MorphSVGPlugin; prototype: PluginScope & MorphSVGPlugin; } interface MorphSVGVars { shape: SVGPathValue; type?: "rotational" | "linear"; origin?: string; shapeIndex?: number | "auto" | number[]; precompile?: "log" | string[]; map?: "size" | "position" | "complexity"; render?: Function; updateTarget?: boolean; } const morphSVG: MorphSVGPluginClass; } declare const MorphSVGPlugin: gsap.plugins.MorphSVGPlugin; declare module "gsap/MorphSVGPlugin" { export const MorphSVGPlugin: gsap.plugins.MorphSVGPlugin; export { MorphSVGPlugin as default }; } declare module "gsap/dist/MorphSVGPlugin" { export * from "gsap/MorphSVGPlugin"; export { MorphSVGPlugin as default } from "gsap/MorphSVGPlugin"; } declare module "gsap/src/MorphSVGPlugin" { export * from "gsap/MorphSVGPlugin"; export { MorphSVGPlugin as default } from "gsap/MorphSVGPlugin"; } declare module "gsap/all" { export * from "gsap/MorphSVGPlugin"; } Does that resolve things for you? 2 Link to comment Share on other sites More sharing options...
jboothe Posted August 28, 2020 Author Share Posted August 28, 2020 Hi Jack, Thanks for the super fast reply. Still getting this error: ERROR in src/app/components/qast-session/fan-stage/fan/fan-sets/yogi/yogi.component.ts:41:9 - error TS2322: Type '{ shape: string; origin: string; type: string; shapeIndex: number; }' is not assignable to type 'string | SVGPathElement | MorphSVGVars'. Object literal may only specify known properties, and 'shape' does not exist in type 'SVGPathElement | MorphSVGVars'. 41 shape: "#Arm-R_2", ~~~~~~~~~~~~~~~~~ node_modules/gsap/types/morph-svg-plugin.d.ts:4:5 4 morphSVG?: SVGPathValue | gsap.plugins.MorphSVGVars; ~~~~~~~~ The expected type comes from property 'morphSVG' which is declared here on type 'TweenVars' Link to comment Share on other sites More sharing options...
GreenSock Posted August 28, 2020 Share Posted August 28, 2020 Silly typo on my part - I had "path" instead of "shape". I updated the code above. Please try again. 2 Link to comment Share on other sites More sharing options...
jboothe Posted August 30, 2020 Author Share Posted August 30, 2020 Great work, Jack. That worked! Now for step 2. Our build system runs npm install against the Bonus file, "gsap": "file:gsap-bonus.tgz". So until your changes make it into the next version, what is your recommendation for a short term solution to satisfy the build system. The only two options I see are: Unpack the tgz and make typings modifications and repack Add you delta changes to our custom typings files within src ( update: tried this unsuccessfully due to duplicate declares) What do you recommend? Link to comment Share on other sites More sharing options...
GreenSock Posted August 30, 2020 Share Posted August 30, 2020 Sure, it should be pretty easy to swap out that file and then npm pack the /node_modules/gsap/ directory to use as a new gsap-bonus.tgz file. I'd be happy to do that myself and send you the tgz if you'd like. I'm not sure what you meant by "duplicate declares" if you just swapped the contents of that one file. 1 Link to comment Share on other sites More sharing options...
jboothe Posted August 30, 2020 Author Share Posted August 30, 2020 Thank you for the offer. I was pleased to see the structure of the uncompressed .tgz file so, I simply applied the modification to morph-svg-plugin.d.ts file the you posted above and we're in business. Thanks, for you amazing response times to this issue. (Jimmy John's got nothin' on you). Duplicate declares was TypeScript yelling that properties we're being declared more than once when I tried to add your changes to my custom typings file whilst leaving the original morph-svg-plugin.d.ts in place. When might we expect your changes to make it into then next production release? Thanks, Jeff 1 Link to comment Share on other sites More sharing options...
GreenSock Posted August 30, 2020 Share Posted August 30, 2020 Great! Glad to hear you got things working. As for when the next update will go out, that's tough to say right now. Might be a few weeks. We try not to just rush a new release out every time there's a minor thing like this, ya know? It's usually best to batch things a bit. There aren't any known significant bugs that need addressing right now, but we're always working on improvements as you can probably tell from all the releases over time. Cheers! 1 1 Link to comment Share on other sites More sharing options...
jboothe Posted August 30, 2020 Author Share Posted August 30, 2020 Well, I think I will take you up on your offer as a sanity check. There seems to be some kind of cacheing going on. Here's my steps: Replace in src, gsap-bonus.tgz containing the package contents in addition to the modified morph-svg-plugin.d.ts file Delete node_modules/gsap npm install Open node_modules/gsap/types/morph-svg-plugin.d.ts and it contains the old version of morph-svg-plugin.d.ts Double clicking the gsap-bonus.tgz and opening package/types/morph-svg-plugin.d.ts shows the new morph-svg-plugin.d.ts Head scratcher. Can I try your gsap-bonus.tgz? Link to comment Share on other sites More sharing options...
jboothe Posted August 30, 2020 Author Share Posted August 30, 2020 Running the new gasp-bonus.tgz on our build system results in: error Verification failed while extracting gsap@file:gsap-bonus.tgz: error Verification failed while extracting gsap@file:gsap-bonus.tgz: error Integrity check failed: error Wanted: sha512-grIoiuTWV+HDv2dU/HYwh58PT1sVfG2Xg4nLwNJNvTUN9rASb2+g4XTjaWvkqDPij6dvaB0bc9sXP+k/5cnIfg== error Found: sha512-9E3dcD4tS3D12AvgTFtzpZDf/S/TqsH8w6XTjFhhDxDAVwOiT1bizqlZDZEmsM52tcjzichEU35m3s0sMpbJbA== So there's more here than meets the eye. Link to comment Share on other sites More sharing options...
GreenSock Posted August 31, 2020 Share Posted August 31, 2020 The first problem sounds kinda like a caching issue maybe. Have you tried clearing that? I'm not sure what's going on with your verification failure. I just sent you an email with the new gsap-bonus.tgz file I created for you. Let us know if that works okay for ya. 1 1 Link to comment Share on other sites More sharing options...
jboothe Posted September 18, 2020 Author Share Posted September 18, 2020 Jack, I never formally thanked you for your help, so BIG THANKS. We deployed on time thanks to your prompt attention. FYI - The verification issue ended being SHA mismatch in the package-lock.json. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now