Invalid property x set to -1024 Missing plugin? gsap.registerPlugin() only in production mode

[13characters]

Hi! 

Somehow my  TweenLite animation won't work in the production mode. It works without errors in development mode.

Also: I have another TweenLite animation and this one works like it should.

What am I doing wrong?

 

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

 

const {gsap} = require('gsap/dist/gsap');
import {TweenLite} from 'gsap';
import 'gsap/CSSPlugin';
gsap.registerPlugin(TweenLite);

const nextInstruction = document.getElementById('nextInstruction');
let instructionLevel = 0;
const xTo = instructionsContainer.offsetWidth;

nextInstruction.addEventListener(`click`, function () {
	instructionLevel ++;
	const instruction = document.querySelectorAll('.instruction');
	TweenLite.to(instruction, 1, {
		x: - (instructionLevel * xTo)
	});
}

 

[GreenSock]

Hm, it looks like you're loading a BUNCH of redundant stuff in various ways: 

1. The GSAP core via a <script> tag
2. The GSAP core via a require() call
3. Just TweenLite piece of the GSAP core via a normal ES Module import statement
4. CSSPlugin which is already in the core (so this is totally unnecessary)

And then you're registering TweenLite as a plugin (it's not a plugin). 

 

You need to decide how you want to work with GSAP - as a regular ES5 file loaded via <script> OR as a UMD file loaded via a require() call OR an ES Module that's imported. Just choose one. There are pros & cons of each. I think the simplest way is probably just use that <script> tag. Done. Make sure that's in your code ABOVE where you run your code that references GSAP, of course, so that it actually exists at that point. 

 

(Side note: you had syntax errors in your code too - your addEventListener() was missing the end ")"). 

 

So if you load it via the <script> tag, you can simplify your code:

// no imports necessary
const nextInstruction = document.getElementById('nextInstruction');
let instructionLevel = 0;
const xTo = instructionsContainer.offsetWidth;

nextInstruction.addEventListener('click', function () {
  instructionLevel++;
  gsap.to('.instruction', {
    duration: 1,
    x: - (instructionLevel * xTo)
  });
});

Or if you don't want to use the <script>, my next favorite option would be to do a regular import (assuming you've installed GSAP already via NPM):

import { gsap } from "gsap";

You don't need to create a variable for instruction either - did you know you can pass the selector text directly to the tween as the target parameter? I show that in my code above. 

 

And I'd strongly recommend updating to the more modern, intuitive, concise GSAP 3 syntax - TweenLite/TweenMax/TimelineLite/TimelineMax are all merged into a single "gsap" object. So there's no need for any "TweenLite" references. See

I hope that helps. 

 

 

[Donzo]

First-time GreenSock user here struggling to fix this error message too.  I'm trying (and prefer) NPM install and ES module.  I have

 

import { gsap } from "gsap";
// ...
let el_first = el_div_with_photos.firstChild;
gsap.to(el_first, { x: 200, duration: 2 });

... which gives this error in Chrome's console:  "gsap-core.js:87 Invalid property x set to 200 Missing plugin? gsap.registerPlugin()".

 

I am running gsap 3.7.1 installed via NPM.  Hugo (with its built-in ESbuild) bundles my JS.  AlpineJS and AnchorJS are the only other libraries active on the page.  The NPM setup must be okay otherwise gsap wouldn't get invoked.  As you said, "no imports necessary".  But still, I tried importing CSSPlugin and gsap.registerPlugin(CSSPlugin) just in case the NPM/import-way of no longer auto-registered CSSPlugin (as that plugin might not be needed or desired in some use cases).  Still get the same error.  Out of ideas here :(.

[Donzo]

Mystery resolved.  Amazing how explaining a problem to someone (in this case, this forum) can immediately generate more ideas.  It turns out that the .firstChild of my <div> container is not the first <div> inside it holding the stuff I want to animate.  .firstChild is just a "text" node (equal to "\n ").  I guess when the first arg to gsap.to() is not a "real" node but text, gsap will not accept any CSSPlugin properties such as "x".  D-oh!

 

let el_first = el_div_with_photos.children[0];    // Fixed!

(Adding this here in case anyone else stumbles across this looking for an answer)

[GreenSock]

Good job finding the solution, @Donzo. And thanks for posting the answer here in case others struggle with the same thing. And yeah, that's not a limitation of GSAP - it's just that text nodes don't have any properties like that which can be modified. 

[OSUblake]

On 8/7/2021 at 11:40 AM, Donzo said:

.firstChild is just a "text" node (equal to "\n ").

 

You're probably looking for .firstChildElement.

 

[Beholder4096]

Same problem here, was looking at firstChild instead of firstElementChild. Problem solved, partially thanks to this thread.