Jump to content
GreenSock

kok siang

MotionPathHelper is not working with Angular

Recommended Posts

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. 

 

 

 

 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×