Jump to content
Search Community

"Invalid property" "y" "set to" -10 "Missing plugin? gsap.registerPlugin()"

KustomDesigner test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hello. My name is Michael, I am currently located in the Florida panhandle area.  I am new to GSAP and I am getting errors I don't understand. I have been a web developer for around 7 years. I am following a GSAP course from udemy and ran into some issues. Please look at my codepen and let me know any suggestions you may have. Thank you. 

See the Pen zYKNrWx?editors=1111 by Kustomdesigner (@Kustomdesigner) on CodePen

Link to comment
Share on other sites

  • Solution

That has to do with your arrow function. Either of these will work.

 

$(".fourColItem")
  .on("mouseenter", (e) => {
    gsap.to(e.target, { y: -10, scale: 1.03 });
    gsap.to(e.target, { boxShadow: "0 0 20px rgba(0,0,0,0.06)" });
  })
  .on("mouseleave", (e) => {
    gsap.to(e.target, { y: 0, scale: 1 });
  });
$(".fourColItem")
  .on("mouseenter", function () {
    gsap.to($(this), { y: -10, scale: 1.03 });
    gsap.to($(this), { boxShadow: "0 0 20px rgba(0,0,0,0.06)" });
  })
  .on("mouseleave", function () {
    gsap.to($(this), { y: 0, scale: 1 });
  });

Happy tweening.

  • Like 3
Link to comment
Share on other sites

Hey KustomDesigner and welcome to the GreenSock forums.

 

As Craig points out, the issue is your arrow function. If you console.log(this) inside of your functions you can see that this is referring to the window. So your tweens are trying to animate the window and those properties don't exist on the window. Simply switching it to a regular function fixes the warnings.

 

Side notes:

  • We recommend putting the duration inside of the vars parameter. 
  • 0.5 is the default duration so you can leave it out in those cases.

It's also best to create your animations beforehand and then use control methods to manipulate them as covered in my article about animating efficiently.

 

Here's how I'd set up what you're trying to do (though personally I'd do it without jQuery):

See the Pen xxEgVGg?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
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.
×
×
  • Create New...