Jump to content
Search Community

autoAlpha invalid property issue

wolfduck test
Moderator Tag

Recommended Posts

Basic premise: I have a component that when rendered to the DOM, listens for when the windows has been resized. Based on window outerWidth, it uses gsap to set the autoAlpha of some elements. E.g.

 

if (viewportWidth >= 768) {
  gsap.set('.header-logo', {
    autoAlpha: 1
  })
  gsap.set('.navbar', {
    autoAlpha: 1,
    css: {
      "grid-column": "2",
      "justify-self": "right"
    }
  })
  gsap.set('.mobile-icon', {
    autoAlpha: 0
  })
} else ...

However, this gets logged to the console: Invalid property autoAlpha set to 0 Missing plugin? gsap.registerPlugin()

 

Any thoughts on why? Perhaps it has to do with the element not actually being visible anymore because so it can't set autoAlpha on '.navbar' ?

Link to comment
Share on other sites

The problem is that you defined a css:{} object and you put the autoAlpha OUTSIDE of that. You really shouldn't need to use a css:{} wrapper unless there's a property that maybe overlaps with a normal CSS-related one, like if you added an "opacity" property directly to your element (which would be weird). So it'd have element.opacity and element.style.opacity. Putting the css:{} wrapper would basically tell the engine "here are the CSS-related things..." and then everything outside of that would be treated as non-CSS-related. So the way you set up your tween basically forced GSAP to try to set a literal "autoAlpha" property directly on your element (and of course there is no such thing). 

 

So either put autoAlpha inside the css:{} wrapper or just omit that wrapper altogether. 

 

Do you mind me asking why you felt the need to use that wrapper in the first place? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

@GreenSock thanks so much for the help! You are right. On the question: no actually, I'm still getting the ropes of gsap, and I assumed a property such as "grid-row" would need a CSS modification. I'll try without the CSS wrapper, see if there's a non-CSS property for grid-row!

 

Thank you!

Link to comment
Share on other sites

6 hours ago, GreenSock said:

You really shouldn't need to use a css:{} wrapper unless there's a property that maybe overlaps with a normal CSS-related one, like if you added an "opacity" property directly to your element (which would be weird).

 

So I've just converted all my old, useless css wrappers in my tweens... I feel very stupid. But I suppose that's the cost of learning.

 

Thanks again! It all works beautifully!

  • Like 2
Link to comment
Share on other sites

Glad you figured it out. Congrats. 

 

Just so you know, GSAP automatically senses if the target of your animation is a DOM element and if so, it'll assume you want to animate CSS values (because that's BY FAR the most common thing people do). It's a convenience that saves you from having to wrap all your stuff in css:{}. 

 

Also, typically it's best to just camelCase the CSS properties, so {"background-color": "red"} would be simply {backgroundColor: "red"}.

 

Happy tweening!

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