kok siang Posted June 17, 2022 Share Posted June 17, 2022 Dear Sir/Madam, I have tried to several ways of using the MotionPathHelper but its not working with angular. Below are the sources code and console stated the error as "MotionPathHelper is not defined":- Chrome Console: core.js:4197 ERROR ReferenceError: MotionPathHelper is not defined at MotionpathGsap2Component.ngOnInit (motionpath-gsap2.component.ts:38:5) at callHook (core.js:3038:1) at callHooks (core.js:3008:1) at executeInitAndCheckHooks (core.js:2960:1) at refreshView (core.js:7187:1) at refreshEmbeddedViews (core.js:8280:1) at refreshView (core.js:7196:1) at refreshComponent (core.js:8326:1) at refreshChildComponents (core.js:6965:1) at refreshView (core.js:7222:1) Html: <h1>MotionPathPlugin (new in GSAP 3)</h1> <svg width="100%" height="100%" viewBox="-20 0 557 190" id="svg"> <circle cx="100" cy="100" r="3" /> <circle cx="300" cy="20" r="3" /> <path id="path" d="M9,100c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"/> <g id="rect"> <rect width="85" height="30" fill="dodgerblue" /> <text x="10" y="19" font-size="14">SVG <rect></text> </g> </svg> <div id="div">#div</div> CSS: circle { fill: black; } html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } h1 { color: white; } #rect text { pointer-events: none; } body { background-color: black; color: #999; font-family: "Signika Negative", Arial, sans-serif; font-weight: 300; font-size: 17px; min-height: 100%; display: flex; flex-direction: column; align-items: center; } svg { overflow: visible; height: 100%; /* Fix Safari rendering bug */ transform: translateZ(0); } path { stroke-width: 2; stroke: gray; } a { color: #88ce02; text-decoration: none; } a:hover { text-decoration: underline; } #div { width: 120px; height: 60px; pointer-events: none; background-color: #aa00ee; color: black; text-align: center; line-height: 60px; position: absolute; top: 30%; left: 60%; font-size: 32px; } Component.ts: import { Component, OnInit } from '@angular/core'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/all'; import { MotionPathPlugin } from 'gsap/all'; // import {MotionPathHelper} from 'gsap/dist/MotionPathHelper'; //import {MotionPathHelper} from 'gsap/MotionPathHelper'; //import { MotionPathHelper } from 'gsap/all'; import * as $ from "jquery"; gsap.registerPlugin(ScrollTrigger, MotionPathPlugin); @Component({ selector: 'app-motionpath-gsap2', templateUrl: './motionpath-gsap2.component.html', styleUrls: ['./motionpath-gsap2.component.css'] }) export class MotionpathGsap2Component implements OnInit { constructor() { } ngOnInit(): void { gsap.to("#rect", { duration: 5, repeat: 12, repeatDelay: 3, yoyo: true, ease: "power1.inOut", motionPath:{ path: "#path", align: "#path", autoRotate: true, alignOrigin: [0.5, 0.5] } }); MotionPathHelper.create("#rect"); } } Note: 1. I have tried to write import {.....} from '.......' or gsap.registerPlugin(ScrollTrigger, MotionPathPlugin, MotionPathHelper); but its not working too. 2. Even tough I add on the below coding from angular.json, its not working too: "scripts": [ "node_modules/gsap/dist/MotionPathPlugin.min.js" ] Appreciate who can help me on this. Thank you. Link to comment Share on other sites More sharing options...
GreenSock Posted June 17, 2022 Share Posted June 17, 2022 MotionPathHelper is a membership benefit of Club GreenSock ("Shockingly Green" and higher). It is not in the public repository. It doesn't look like you have joined Club GreenSock yet. There's a special trial version that you can use locally, on CodePen.io and CodeSandbox.io (it won't work on other domains) here: https://www.npmjs.com/package/gsap-trial. So you'd install that and then import from "gsap-trial/MotionPathHelper". Again, do not deploy that file - it's just meant for trial use. Once you join Club GreenSock, you'll get access to the private repository and the zip download that has the unrestricted files. Join at https://greensock.com/club Happy tweening! 1 Link to comment Share on other sites More sharing options...
kok siang Posted June 24, 2022 Author Share Posted June 24, 2022 On 6/17/2022 at 11:39 AM, GreenSock said: MotionPathHelper is a membership benefit of Club GreenSock ("Shockingly Green" and higher). It is not in the public repository. It doesn't look like you have joined Club GreenSock yet. There's a special trial version that you can use locally, on CodePen.io and CodeSandbox.io (it won't work on other domains) here: https://www.npmjs.com/package/gsap-trial. So you'd install that and then import from "gsap-trial/MotionPathHelper". Again, do not deploy that file - it's just meant for trial use. Once you join Club GreenSock, you'll get access to the private repository and the zip download that has the unrestricted files. Join at https://greensock.com/club Happy tweening! noted thank you 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