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.
