MotionPathHelper is not working with Angular

[kok siang 3 Likes (Newbie)]

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 &lt;rect&gt;</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. 

 

 

 

 

[GreenSock 16,972 Likes (Superhero)]

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!

[kok siang 3 Likes (Newbie)]

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