Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
KustomDesigner

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

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

5 minutes ago, ZachSaucier said:

though personally I'd do it without jQuery

+1

 

A good site to bookmark.

http://youmightnotneedjquery.com/

 

PS I forgot to mention it in my first reply, but welcome to the forum. :)

 

  • Like 1
Link to comment
Share on other sites

@PointC  Thank you for the prompt response, I will have to keep an eye on my es6 usage. @ZachSaucier  Thanks for the additional tips and I agree, Vanilla JS is usually the way to go but I was mostly focusing on GSAP in this course, not so much Javascript. 

  • Like 1
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.
×