TweenMax.js on the local server (MAMP) does not initialize correctly - throws an error

Question

I am running a local server (MAMP) on macOS. When I open the .php (html) file of a webpage with TweenMax on it http: // localhost: 8888 / Index.php / The page loads fine, but teens don't work at all. An error message is displayed in the browser console: "Unavailable Unable to change the zero target."

When I launch the same page in a browser, but the page is hosted on a remote server: https://depicture.io/ , tweenmax works. Why is there such a difference? Should the scripting behavior be the same between the local server and the remote server?

Any help would be greatly appreciated, as I could not find anyone who would have a similar problem.

I also get this error:

DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at Function.CSSRulePlugin.getRule (http://localhost:8888/Depicture/js/CSSRulePlugin.js:53:19)
    at HTMLDocument.<anonymous> (http://localhost:8888/Depicture/:2077:29)
    at c (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:7857)
    at Object.fireWith [as resolveWith] (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:8658)
    at Function.ready (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:3266)
    at HTMLDocument.H (https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:3:695)

which points to this line:

var rule = CSSRulePlugin.getRule(".grid__item span::after");

CSSRulePlugin loads as it should and works fine on the remote server.

Answer 1

Follow the steps below: https://www.npmjs.com/package/greensock

Install via npm or directly use the cdn url as below

VIA NPM -

npm install gsap

VIA CDN-

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>

Then in your code import it as below -

//typical import 
import {TweenMax, Power2, TimelineLite} from "gsap";

//or get to the parts that aren't included inside TweenMax (works as of 1.19.1): 
import Draggable from "gsap/Draggable";
import ScrollToPlugin from "gsap/ScrollToPlugin";

I think this should work.