Invalid property ease set to 0 Missing plugin? gsap.registerPlugin()

[Donzé]

Hello,

 

I have the following warning message in the google chrome console :
gsap.min.js:10 Invalid property ease set to 0 Missing plugin? gsap.registerPlugin()

 

Can you tell me why I have this warning message?
I specify that I use the wordpress CMS

 

Here is the version of gsap I use : 

 

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

Here is the js code for which I use gsap et CSSRulePlugin:

 

gsap.registerPlugin(CSSRulePlugin);

// animation Menu

const boutonOpen = document.querySelector('#open-button');
const boutonClose = document.querySelector('#close-button');

const tl = gsap.timeline({paused : true});

tl.to('.pull-menu', 0.5, {opacity:1,ease: Power2.easeOut}, '-=0.5');

tl.staggerFrom('.wifeo_rubrique', 0.4,{ y:30, opacity:0}, 0.05)
var rule02 = CSSRulePlugin.getRule(".menu-part-left::after"); //get the rule
tl.to(rule02, {duration: 0.5, cssRule: {width: 95}},'-=0.3')
tl.staggerFrom('#accordion li', 0.4,{ y:30, opacity:0, delay:-0.5}, 0.05)
tl.staggerFrom('.menu--bas-page li', 0.5,{ y:50, opacity:0, delay:-1}, 0.1)
var rule = CSSRulePlugin.getRule(".pull-menu-open::after"); //get the rule
tl.from(rule, {duration: 0.3, cssRule: {height: 0, ease: Power2.easeOut}},'=-0.5')
var rule01 = CSSRulePlugin.getRule(".pull-menu-open::before"); //get the rule
tl.to(rule01, {duration: 0.3, cssRule: {opacity: 1, ease: Power2.easeOut}},'=-0.2' )

boutonOpen.addEventListener('click', (e) => {
  
  if(tl.isActive()){
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
  }
  tl.restart();

});

Thank you for your answers

 

Maxime Donzé

[Richard1604]

Try putting your ease value in double quotes...

[ZachSaucier]

@Richard1604 That is definitely not the issue. The format that Maxime is using is from GSAP 2 and is valid, though not recommended. We highly recommend the GSAP 3 formatting.

 

@Donzé Please make a minimal demo of the issue so that we can see the problem clearly

[GreenSock]

The problem is that you nested your ease inside of the cssRule object. 

// BAD
tl.to(rule01, {duration: 0.3, cssRule: {opacity: 1, ease: Power2.easeOut}},'=-0.2');

// GOOD
tl.to(rule01, {duration: 0.3, cssRule: {opacity: 1}, ease: Power2.easeOut},'=-0.2');

So it's literally trying to animate an "ease" CSS rule

[UserX]

 

gsap.min.js:10 Invalid property drawSVG set to 0% Missing plugin? gsap.registerPlugin()
gsap.min.js:10 Invalid property drawSVG set to 100% 100% Missing plugin? gsap.registerPlugin()

 

I am getting above two warning when my page is load can you help to remove those warning()

[Cassie]

You're missing this plugin - it's a club GSAP perk

[DWingoGSU]

Hi, 

 

I believe something similar is happening to me. I don't quite understand why it's triggering this error in the console.

Code:

[GreenSock]

JavaScript is case-sensitive. It looks like you tried animating "X" rather than "x".